台風前線 | 台風画報(ブログパーツ)

今年の台風シーズンに合わせて台風前線がアップデートしました。
ブログパーツが誕生したようです。

台風画報

去年一緒につくっていた碓井さんが、
1年も前に自分が書いたAS2のコードを、アップデートしてくれたみたいで、
本当にありがとうございます。

Flex Builder ショートカットキー覚書

(09/06/23 追加)

・Ctrl + alt + D  ASDocコメント追加

・Ctrl + alt + O  インポートの整理

=

・Ctrl + alt + ↓  行複製
FlashDevelopではCtrl + Dでお世話になっていた機能。
Flex使うようになって半年でようやく発見。

・Ctrl + alt + R  変数名変更
非常に便利

・Ctrl + Shift + C  コメントアウト
これも便利

また何かあったら書き足す

openFrameworks #1

openFrameworksを触ってみました。

まずはセットアップのメモ (Win Xp)

openframeworksのサイトを参考に
openframeworks: about
openframeworks: installation visual studio (VC++ 2005, express edition)

VSS2005をインストール
Visual Studio Express Edition の過去のバージョンのダウンロード

Windows SDK for Windows Server 2008 and .NET Framework 3.5をインストール
Download details Windows SDK for Windows Server 2008 and .NET Framework version 3.5

DirectX Software Development Kitをインストール
Download details DirectX SDK – (March 2008)

最初printfの書き方すら忘れていて、久々のC、初のC++に苦戦しながら、
前からずっと書きたかったグラデーションを書きました。

以下、勝手な感想
シリアル通信が簡単にできそうなので、インスタレーションものには使えるのかも。
Processingとかが対抗馬な印象だけれど、Cで動くから早そう。
OpenCVとかがaddOnとして使えるから画像処理系も色々できるかも。

-参考
Diamond-square algorithm – Wikipedia, the free encyclopedia
printf – Wikipedia

SyntaxHighlighter

SyntaxHighlighterを導入。
<pre name="code" class="actionscript"></pre>
でコードに色を付けてくれる。

× WordPressのプラグインを使えば、

[sourcecode language='css'] … [/sourcecode]

[css] … [/css] 

のような表記でもいけるらしいが、色々微妙で削除。

WordPress › SyntaxHighlighter« WordPress Plugins
WordPress › SyntaxHighlighter Plus « WordPress Plugins

× WorPress上に設定パネルができて、使う言語とかオプションを設定できる
プラグインもあったが、<pre>タグではなく、<textarea>タグで
挿入されるのがなんとなく気持ち悪いので削除。
SyntaxHighlighter @ Open Sourced Brain.

○ 結局、Mark氏が公開しているAS3用のjsだけ追加した。
AS3 Syntax Highlighting (with SyntaxHighlighter)

△ また、IE6 (Mac OSX 10.5 – Parellels – Win xp) で奇数の行番号が
なぜか全部1になってしまったのだが、対策を考えるのが面倒になって、

<pre name="code" class="actionscript:nogutter">

と書いて、行番号を出さないことにした。

Configuration – syntaxhighlighter – Google Code

—-

やり方をまとめると、

1) syntaxhigHlighterをダウンロード
http://code.google.com/p/syntaxhighlighter/

2) Mark氏のサイトからAS3用拡張をダウンロード
http://www.digitalflipbook.com/archives/2007/09/as3_syntax_high.php

3) 1を解凍したフォルダ内、dp.SyntaxHighlighter/Scripts に
shBrushAS3.js を追加

4) 3と同様に dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css を
2のStyles内のものと置き換え(見やすいので)

5) jsとcssの入ったフォルダをアップロード

6) js, cssへのパスを通す

<link type="text/css" rel="stylesheet" href="/blog/styes/SyntaxHighlighter.css"></link>
<script language="javascript" src="/blog/scripts/shCore.js"></script>
<script language="javascript" src="/blog/scripts/shBrushAS3.js"></script>
<script language="javascript" src="/blog/scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = '/blog/scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

7) 以下のタグでコードを囲む。

<pre name="code" class="actionscript">
 ...
</pre>

FLV周辺の再利用やノイズ対策

たくさんのFLVをいかに効率よく、美しく流すか。
みたいなメモです。

– 前提
Video、NetStreamやNetConnectionなどの処理を
まとめたVideoSpriteクラス、みたいなものを作る。
これらのインスタンスを毎回消去して、新しくnewすると
ブラウザに負荷がかかるので、消去せずに再利用する。

– 再利用と消去
以下に載せたクラスで、再利用前にやるのがsleepメソッド。
本当にいらなくなった時に消去するために呼ぶのがkillメソッド。

– ノイズ防止
FLVはキーフレーム間を差分で描画しているので、無茶な処理をすると
ピンクのノイズが出て、描画がボロボロになります。その対策。

1. 一度playを実行した_ns(NetStream)に再度playをかける時は、
必ずthis._ns.close();を呼んでから。

2. 再生中のものを頭出ししてすぐ再生したい時は
pause(); → seek(0); → NetStatusEventのNetStream.Seek.Notifyを受ける。
→ resume();
(単純に1のように、closeして再度playでもいい気がします)

— 追記(08/05/20):
再生中のものはすでにキャッシュ済みなのですぐ再生可能
→ 単純に1のように、closeして再度playした方が良いです。
—-

まとめると、closeし忘れに注意ということです。

以下 as。

package{

	import flash.display.Sprite;
	import flash.events.NetStatusEvent;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	public class VideoSprite extends Sprite

		private var _video:Video;
		private var _nc:NetConnection;
		private var _ns:NetStream;

		public function VideoSprite():void{
			this._video = new Video();
			this.addChild(this._video);
			//NetConnectionをnew
			this._nc = new NetConnection();
			this._nc.connect(null);
			//NetStreamをnew
			this._ns = new NetStream(this._nc);
			var customClient = new Object();
			this._ns.client = customClient;
			//NetStreamをattach
			this._video.attachNetStream(this._ns);
			//イベント定義
			this._ns.addEventListener(NetStatusEvent.NET_STATUS, this.statusHandler); 
		}

		//NetStatusEvent処理
		private function statusHandler(event:NetStatusEvent):void
		{
			switch(event.info.code) {
				// 省略
				default:
					break;
			}
		}

		//色々省略

		//再利用時のクローズ作業
		public function sleep():void{
			this._video.clear();
			this._nc.close();
			this._ns.close();
		}

		//消去時
		public function kill():void {
			this.sleep();
			this.removeChild(this._video);
			this._ns.removeEventListener(NetStatusEvent.NET_STATUS, this.statusHandler); 
			this._video.attachNetStream(null);
			this._ns = null;
			this._nc = null;
			this._customClient = null;
			this._video = null;
		}
	}

}

UT LOOP!

2月にtha*へ移籍しました。
最初の案件、UT LOOP!、4/18にローンチしました。

tha流ドラゴンボールメソッドと、自己流 没頭→食べない→眠くならない理論が、
最強の掛け算となるよう、これからも頑張っていこうと思います。

以下、クレジットです。
Planning / Art Direction / Design: Yugo Nakamura (tha)
Design / Flash : Sohei Kitada (tha)
Technical Direction : Keita Kitamura (tha)
Video Edit : Erica Sakai (tha)
Video Production : same as TV-AD
Banner : spctrm

– 詳細情報
http://tha.jp/feed/34
http://tha.jp/feed/31

みなさま、ありがとうございました。

WordPress

身の回りでWordPressが良いと聞くことが多いので、MTから移行しました。
パーマリンクは以前のままで大丈夫だと思います。

ついでに周りの真似をしてFeedBannerもやってみました。
http://feeds.feedburner.jp/sooheinetblog

Premire – mov – flv

Premireで切った映像をmovで書き出そうとしたら、
「ムービーの作成中にエラーが発生しました」
というエラーが出て進めなくなった。

aviなら書き出せたので、書き出したものを
CS3 Video Encoderでflvに変換したところ、
今度は音が鳴らなくなった。

1つ目の問題は
[231895]オーディオまたはビデオファイルの書き出しができない
という記事を見つけて、色々な場所に保存を試みていたら、
ドライブの直下で保存できた。

quicktime形式はflvに変換した後もちゃんと音が鳴ったので、
2つ目の問題については深追いせずに解決した。

映像系の人には常識かもしれないけど、
2度とつまづかないようにメモ。

– 参考サイト
[231895]オーディオまたはビデオファイルの書き出しができない

参照の値渡し

「参照の値渡し」ということばを初めて聞いた。

まず基本から。プリミティブ型とオブジェクト型の違い。

/* ActionScript3 */
//テスト1
var strA:String = "AAA";
var strB:String = "BBB";
this.strA = this.strB; //BBB, BBB
this.strB = "CCC"; //BBB, CCC
this.strA = "DDD"; //DDD, CCC

//テスト2
var objA:Object = {value: "AAA"}
var objB:Object = {value: "BBB"}
this.objA = this.objB; //BBB, BBB
this.objB.value = "CCC"; //CCC, CCC
this.objA.value = "DDD"; //DDD, DDD

//テスト3
var objA:Object = {value: "AAA"}
var objB:Object = {value: "BBB"}
this.objA = this.objB; //BBB, BBB
this.objB = {value: "CCC"} //BBB, CCC
this.objA = {value: "DDD"} //DDD, CCC

次に実は今まで少し不安だった部分の検証。
引数として受ける時、どんな感じに参照されているか。
これが参照の値渡しってことなのかも。

/* ActionScript3 */
//テスト1
var strA:String = "AAA";
var strB:String = "BBB";
this.strA = this.strB; //BBB, BBB
this.setCCC(this.strB); //BBB, BBB
this.setDDD(this.strA); //BBB, BBB

function setCCC(str:String):void{
str = "CCC";
}
function setDDD(str:String):void{
str = "DDD";
}

//テスト2
var objA:Object = {value: "AAA"}
var objB:Object = {value: "BBB"}
this.objA = this.objB; //BBB, BBB
this.setCCC(this.objB); //CCC, CCC
this.setDDD(this.objA); //DDD, DDD

function setCCC(obj:Object):void{
obj.value = "CCC";
}
function setDDD(obj:Object):void{
obj.value = "DDD";
}

//テスト3
var objA:Object = {value: "AAA"}
var objB:Object = {value: "BBB"}
this.objA = this.objB; //BBB, BBB
this.setCCC(this.objB); //BBB, BBB
this.setDDD(this.objA); //BBB, BBB

function setCCC(obj:Object):void{
obj = {value:"CCC"};
}
function setDDD(obj:Object):void{
obj = {value:"DDD"};
}

たぶん当たり前のことなんだけど、
どこからどこまでが同じメモリの参照なのか
ということがわかりました。

- 参考サイト
AS3では関数の引数はすべて値渡し(call by value)である / flashrod
参照渡し・値渡し - PBD - subtech
func09 » コリン・ムック「今から始めるActionScript 3.0」に行ってきました

swfforcesize.js

swfforcesize.js。

swfObjectでflashコンテンツを100%, 100%表示時、
swfの既定サイズよりブラウザが小さくなっても、スクロールバーは出ない。
swfforcesize.jsを追加することで、スクロールバーが出るようになる。

以下cssの記述と、htmlの記述。(一部省略気味)

/* CSS */
html {
height: 100%;
overflow: auto;
}
#flashcontent {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: #fff;
}
<!-- HTML -->
<div id="flashcontents"></div>
<script type="text/javascript">
//<![CDATA[
var so = new SWFObject('./----.swf', 'website', '100%', '100%', '9', '#ffffff');
so.useExpressInstall('./js/expressinstall.swf');
so.addParam('menu', 'false');
so.addParam('scale', 'noscale');
so.addParam('salign', 'lt');
if(so.write('flashcontent')){
var forcesize = new SWFForceSize( so, 1024, 680 ); //←swfの設定サイズ
}
// ]]>
</script>

- 参考サイト
pixelbreaker : SWFObject add-on: Size limiting for full window flash