katamariを真似してうねうね動く円
うねうねと有機的に動く円を作ってみた。katamariさんのサイトを見よう見真似で模写。なんか違う気がするなぁ。うねり具合がしっくりこない。
パーティクルの練習
パーティクルのお勉強中。こうやって動かしてたのねー。
BEYES / RECOMMEND#61 6scenes, 18eyes.
Flashのオーサリングを担当しました。AS3で実装。サイトと同じものが表参道ヒルズ内のEDITWALLに映像として映し出されてました。スタッフの皆様おつかれさまでした。
CREDIT
AD+De+Pl: Yu-ki Sakurai(Metamosphere)
Fl: Shinichi Shimomura(5ive)
Ph: Tomoo Nozawa
Mk: Yumi Sakai
Mo: Syouichi Honda
So: Yasuharu Motomiya
PM: Hiroo Suzuki(KAYAC)
Cl: BEYES
CSSを紛失しました。
一瞬の気の緩みでブログのCSSが跡形もなく消え去りました。バックアップもなし。あーあ。新しく作り直すか・・・。
パブリッシュ用テンプレートHTMLをカスタマイズするには
Flashでパブリッシュすると、毎回AC_RunActiveContent対応のhtmlが出力されて手直しがめんどい。調べたらパブリッシュ用のテンプレートをカスタマイズできるらしい。自分が良く使うSWFObject対応のテンプレートを作ってみる。下記の場所にMyDefault.htmlという名前でファイルを追加する。Flashのパブリッシュ設定でHTMLタブのテンプレートから「Flash MyDefault」が選択できるようになっているので選んでパブリッシュする。これで出力されたhtmlはSWFObject対応になっている。もっと早く設定しときゃよかった。
Win
C:\Documents and Settings\ユーザ名\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\HTML
Mac
Macintosh HD/Applications/Adobe Flash CS3/First Run/HTML
MyDefault.html
HTML:
$TTFlash MyDefault
$DXDefaultDetection.html
$DS
SWFObjectpɍXVꂽHTMLt@CAdobeFlash[r[\܂B:swfobject.jst@C͏o͂Ȃ̂ŁAHTMLƈꏏɎ蓮ŃAbv[hKv܂B
$DF
$DXDefaultDetection.html
$DS
SWFObjectpɍXVꂽHTMLt@CAdobeFlash[r[\܂B:swfobject.jst@C͏o͂Ȃ̂ŁAHTMLƈꏏɎ蓮ŃAbv[hKv܂B
$DF
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$TI</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<style type="text/css">
body {
margin:0;
background-color:$BG;
}
</style>
</head>
<body>
<div id="flashcontent">
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank"><img src="img/noflash.jpg" alt="You need to upgrade your Adobe Flash Player!" width="$WI" height="$HE" hspace="0" vspace="0" border="0"/></a>
</div>
<script type="text/javascript">
var so = new SWFObject('$TI.swf', '$TI', '$WI', '$HE', '$FV,$JR,$NR,0', '$BG');
so.addParam('menu', 'false');
so.write('flashcontent');
</script>
</body>
</html>
このファイルの中で使ってるテンプレート変数の一覧はこちらから。
■追記 20080612
charsetをUTF-8対応に書き換えました。
コリンムックのAS3勉強会に行ってきた
今更ですが2008年最初のエントリー。Essential ActionScript3.0の著者コリンムックの勉強会に行ってきた。世界トップクラスのActionScriptのインストラクターという事でかなり期待して参加したけど、その名の通り初心者にも分かりやすい内容だった。オブジェクト指向プログラミングを独学で勉強中の身としてはかなり役立った。今まで曖昧に覚えてた事が理解できてきたかも。人のコーディングを見れると言うのは、貴重だし理解も早い。
内容としてはVirtualZooという架空の動物園でペットを飼うゲームをAS3で作る、というもの。（たまごっちの簡易版）エサをやらないと10秒で死んでしまうライフゲーム。このゲームをオブジェクト指向プログラミングで作るとどうなるかをライブコーディングしてくれました。特に感じたのがAS3を意識しないでOOPを学べた事。AS3の文法でがっつりコーディングするのではなく、OOP的考え方を教えたかったようだ。以下は自分的に気になったメモ。
・ソースは/virtualzoo/src/フォルダに格納。
・素材は/virtualzoo/bin/フォルダに格納。
・メインクラスは必ずSpriteかMovieClipを継承。
・変数にnullを代入すると参照を切った状態（メモリには残ったまま）になる。これで削除の準備状態に。ガーベジコレクション発動でメモリから解放。
・this参照を省略するとローカル変数→インスタンス変数の順番でFlash側が自動的に参照先を探してくれる。省略すると実行速度が多少落ちたりするのかな？
・MODEL（ロジック、データ管理、表示はしない）
・VIEW（グラフィック、レンダリング、MODELから通知を受けたら画面更新）
・CONTROLLER（ユーザからの入力、インプット、MODEL・VIEWに通知）
・EventDispatcherクラス。任意のタイミングでカスタムイベントを発行。ようやく便利さに気づいた。
・setメソッド、getメソッド。インスタンス変数を直接参照せずにメソッドで呼び出したり、値を代入する。
・継承について。
・状態変数の使い方。public static const PETSTATE_FULL:int = 0;
・container.mouseEnabled = false; 自身のオブジェクトがマウスイベントを受け取らなくなる。
・container.mouseChildren = false; オブジェクトの子供インスタンスにマウスイベントが送信されなくなる。
本日の資料が公開されてます。
AS3のFlvPlayBackを試してみる
AS2の時とコードの記述が少し変わったみたい。ポイントはメタデータの取得方法とムービー状態（再生・停止・シークなど）をどう捕まえるか。メタデータに関してはMetadataEventのMETADATA_RECEIVED をリスナーに登録しておいて、受け取るハンドラの中でそれぞれ取り出してやればよい（左上の白文字）。次にムービー状態に関してはVideoEventに捕まえたいイベントオブジェクトを登録しておくだけ。あとはハンドラ内でムービーの再生時間などを処理してやればよい。playheadPercentageを使うと、現在の再生ヘッドが全体の何パーセントなのかを示してくれる。トータルタイムにこのパーセンテージを乗算すれば現在の再生時間が簡単に出せる。
デフォルトのシークバーコンポーネントには再生ヘッドまでのプログレス表示をしてくれない。今回はシークバーと同じ幅のムービークリップをあらかじめシークバーコンポーネントの中に配置しておいてscaleXにplayheadPercentageの値を入れて動作させてみた（シークバーの白い部分）。
ACTIONSCRIPT:
package
{
import flash.display.MovieClip;
import fl.video.MetadataEvent;
import fl.video.FLVPlayback;
import fl.video.VideoEvent;
import flash.text.TextField;
public class Main extends MovieClip
{
//------------------------------
// コンストラクタ
//------------------------------
public function Main()
{
player.source = "test.flv";
player.bufferTime = 1;
player.addEventListener(MetadataEvent.METADATA_RECEIVED, onMetadata);
player.addEventListener(VideoEvent.READY, onReady);
player.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlaying);
player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onPlayHead);
player.addEventListener(VideoEvent.PAUSED_STATE_ENTERED, onPause);
player.addEventListener(VideoEvent.COMPLETE, onComplete);
player.playPauseButton = playBtn;
player.muteButton = muteBtn;
player.backButton = backBtn;
player.seekBar = seekBar;
player.fullScreenButton = fullScreenBtn;
{
import flash.display.MovieClip;
import fl.video.MetadataEvent;
import fl.video.FLVPlayback;
import fl.video.VideoEvent;
import flash.text.TextField;
public class Main extends MovieClip
{
//------------------------------
// コンストラクタ
//------------------------------
public function Main()
{
player.source = "test.flv";
player.bufferTime = 1;
player.addEventListener(MetadataEvent.METADATA_RECEIVED, onMetadata);
player.addEventListener(VideoEvent.READY, onReady);
player.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlaying);
player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onPlayHead);
player.addEventListener(VideoEvent.PAUSED_STATE_ENTERED, onPause);
player.addEventListener(VideoEvent.COMPLETE, onComplete);
player.playPauseButton = playBtn;
player.muteButton = muteBtn;
player.backButton = backBtn;
player.seekBar = seekBar;
player.fullScreenButton = fullScreenBtn;
}
//------------------------------
// メタデータの取得
//------------------------------
private function onMetadata(e:MetadataEvent):void
{
meta.appendText("FrameRate = " + player.metadata.framerate + "\n");
meta.appendText("VideoDataRate = " + player.metadata.videodatarate + "\n");
meta.appendText("Height = " + player.metadata.height + "\n");
meta.appendText("Width = " + player.metadata.width + "\n");
meta.appendText("Duration = " +player.metadata.duration + "\n");
}
//------------------------------
// FLVの初期化
//------------------------------
private function onReady(e:VideoEvent)
{
var time = String(Math.floor(player.totalTime));
var minute = String(Math.floor(time / 60));
var second = String(time % 60);
if (minute <10)
{
minute = "0" + minute;
}
if(second <10)
{
second = "0" + second;
}
total.text = "/ " + minute + ":" + second;
now.text = "00:00";
stateText.text = "PAUSE";
seekBar.seekProgress.scaleX = 0;
}
//------------------------------
// FLVの再生時
//------------------------------
private function onPlaying(e:VideoEvent)
{
stateText.text = "PLAY";
}
//------------------------------
// FLVの再生中
//------------------------------
private function onPlayHead(e:VideoEvent)
{
var time = Math.floor(player.totalTime * player.playheadPercentage / 100);
var minute = Math.floor(time / 60);
var second = time % 60;
if (minute <10)
{
minute = "0" + minute;
}
if(second <10)
{
second = "0" + second;
}
now.text = minute + ":" + second;
//-----[再生ヘッドまでのプログレスバー]
seekBar.seekProgress.scaleX = player.playheadPercentage / 100;
}
//------------------------------
// FLVの一時停止時
//------------------------------
private function onPause(e:VideoEvent)
{
stateText.text = "PAUSE";
}
//------------------------------
// FLVの再生終了時
//------------------------------
private function onComplete(e:VideoEvent)
{
stateText.text = "FINISH";
}
}
}
HIGH5に行ってきた
六本木のAXISビルでHIGH5が開催されました。HIGH5とはデザインポータルサイトのHITSPAPERが主宰するデザインカンファレンス。5組のスピーカーが自身のクリエイティブシーンについて紹介してくれた。特に面白かったのがWOWさんとPROJECTORさんの話。
WOWさんに見せてもらった映像作品はどれもハイレベルで圧倒されるものばかり。10周年を迎えてのアートブックの話や、ロンドンでの展示会の様子、新作映像、今後の展開など。そして会社内ではアートプロジェクトをいくつか立ち上げてるという話。クライアントワークとは別でそれぞれのデザイナーが好きに参加して作品を作っているらしい。現在は東京、仙台、ロンドンで活動中とか。クライアントに提案するときは必ずプラスアルファ（サービス精神）を盛り込むらしい。こうする事で次につながる仕事にしているようだ。
PROJECTORさんの話はBIG SHADOWとUNIQLOについて。BIG SHADOWでは現状にない新しいメディアを作りたかったという話。参加型屋外広告がなぜ渋谷だったのか、なぜあのビルだったのかなど。また多種多様な業界の人に参加してもらって形になったプロジェクトと言うこと。UNIQLOに関してはリンクポピュラリティを上げたいと言うクライアント側からの要望が全ての始まり。どうやったら人に伝えたくなるか、話題になるか、バイラルになるか。MIXPLAY、UNIQLOCK、UNICLO JUMPの一連プロモーションの裏話を聞くことができて非常に面白かった。
有意義な良いカンファレンスでした。
AIRでのローカルディレクトリのアクセス先
ローカルディレクトリにアクセスする場合、AIR側でプラットフォーム間の差異を吸収してくれるらしい。具体的にどこを参照しているのかメモ。（Winの場合）
File.applicationResourceDirectory
C:\Documents and Settings\ユーザ名\air\testアプリファイル本体があるディレクトリ。
File.applicationStorageDirectory
C:\Documents and Settings\ユーザ名\Application Data\アプリID\Local Storeこれが分かりにくい。AIRをパッケージするときにアプリ設定の画面で設定したID名（info.five.testとか）でディレクトリが作られてて、その中の「Local Store」を指してるみたい。
File.desktopDirectory
C:\Documents and Settings\ユーザ名\デスクトップこれはそのまんまデスクトップ。
File.documentsDirectory
C:\Documents and Settings\ユーザ名\My Documentsこれもそのまんまマイドキュメント。
File.userDirectory
C:\Documents and Settings\ユーザ名\ログインユーザのデフォルトディレクトリ。
ランダムテキストをやってみる
最近ビットマップフォントの常套モーションになっているランダムテキストを自作してみた。最初のモーションですべての文字を「アンダーバー」に変えてからランダムに1文字づつシャッフルしてます。TimerEventで動かしてるんだけど、シャッフルのスピードがブラウザで見るとやや遅い。デバッグプレイヤーだと思い通りのスピードなのに。ENTER_FRAMEで動かすほうが良いの？。誰か教えてください。
コードは以下参照。シャッフル時間を任意に調整できるようにしてます。
ACTIONSCRIPT:
package info.five.filters
{
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class RandomText
{
const _replaceWord:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789=+-*/!?";
private var _content:TextField;
private var _word:String;
private var _timer:Timer;
private var _randomCnt:uint;
private var _randomArr:Array = new Array();
private var _shuffleArr:Array = new Array();
private var _speed:Number = 1;
private var _time:uint = 30;
private var _cnt1:uint = 0;
private var _cnt2:uint = 0;
//------------------------------
// ランダムテキストクラス
//------------------------------
public function RandomText(content:TextField)
{
this._content = content;
this._word = content.text;
_timer = new Timer(_speed, 0);
_timer.addEventListener(TimerEvent.TIMER, onTick, false, 0, true);
}
//------------------------------
// テキストの再設定
//------------------------------
public function setText(newText:String):void
{
this._word = newText;
}
//------------------------------
// モーションスタート
//------------------------------
public function start():void
{
//-----[変数の初期化]
_content.text = "";
_randomCnt = 0;
_randomArr = [];
_shuffleArr = [];
_cnt1 = 0;
_cnt2 = 0;
_content.wordWrap = false;
_content.autoSize = TextFieldAutoSize.LEFT;
//-----[文字番号を配列に取得]
for(var i:uint=0; i<_word .length; i++)
{
_randomArr.push(i);
_content.appendText("_");
}
//-----[文字番号をシャッフル]
_shuffleArr = shuffle(_randomArr);
_timer.start();
}
//------------------------------
// 配列のシャッフル
//------------------------------
private function shuffle(arr:Array):Array
{
var l = arr.length;
var newArr = arr;
while(l)
{
var m = Math.floor(Math.random()*l);
var n = newArr[--l];
newArr[l] = newArr[m];
newArr[m] = n;
}
return newArr;
}
//------------------------------
// シャッフルモーション
//------------------------------
private function onTick(e:TimerEvent):void
{
if(_randomCnt <_time)
{
var randomNo:uint = Math.round(Math.random() * _replaceWord.length);
var s1:uint = _shuffleArr[_cnt1];
var s2:uint = _shuffleArr[_cnt1] + 1;
var s3:String = _replaceWord.charAt(randomNo);
_content.replaceText(s1, s2, s3);
if(_cnt1>= _word.length - 1) _cnt1 = 0;
else _cnt1++;
}
else
{
var s4:uint = _shuffleArr[_cnt2];
var s5:uint = _shuffleArr[_cnt2] + 1;
var s6:String = _word.charAt(_shuffleArr[_cnt2]);
_content.replaceText(s4, s5, s6);
_cnt2++;
if(_cnt2>= _word.length)
{
_timer.stop();
}
}
_randomCnt++;
}
//------------------------------
// getter
//------------------------------
public function get time():uint
{
return _time;
}
//------------------------------
// setter
//------------------------------
public function set time(t:uint):void
{
_time = t;
}
}
}
{
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class RandomText
{
const _replaceWord:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789=+-*/!?";
private var _content:TextField;
private var _word:String;
private var _timer:Timer;
private var _randomCnt:uint;
private var _randomArr:Array = new Array();
private var _shuffleArr:Array = new Array();
private var _speed:Number = 1;
private var _time:uint = 30;
private var _cnt1:uint = 0;
private var _cnt2:uint = 0;
//------------------------------
// ランダムテキストクラス
//------------------------------
public function RandomText(content:TextField)
{
this._content = content;
this._word = content.text;
_timer = new Timer(_speed, 0);
_timer.addEventListener(TimerEvent.TIMER, onTick, false, 0, true);
}
//------------------------------
// テキストの再設定
//------------------------------
public function setText(newText:String):void
{
this._word = newText;
}
//------------------------------
// モーションスタート
//------------------------------
public function start():void
{
//-----[変数の初期化]
_content.text = "";
_randomCnt = 0;
_randomArr = [];
_shuffleArr = [];
_cnt1 = 0;
_cnt2 = 0;
_content.wordWrap = false;
_content.autoSize = TextFieldAutoSize.LEFT;
//-----[文字番号を配列に取得]
for(var i:uint=0; i<_word .length; i++)
{
_randomArr.push(i);
_content.appendText("_");
}
//-----[文字番号をシャッフル]
_shuffleArr = shuffle(_randomArr);
_timer.start();
}
//------------------------------
// 配列のシャッフル
//------------------------------
private function shuffle(arr:Array):Array
{
var l = arr.length;
var newArr = arr;
while(l)
{
var m = Math.floor(Math.random()*l);
var n = newArr[--l];
newArr[l] = newArr[m];
newArr[m] = n;
}
return newArr;
}
//------------------------------
// シャッフルモーション
//------------------------------
private function onTick(e:TimerEvent):void
{
if(_randomCnt <_time)
{
var randomNo:uint = Math.round(Math.random() * _replaceWord.length);
var s1:uint = _shuffleArr[_cnt1];
var s2:uint = _shuffleArr[_cnt1] + 1;
var s3:String = _replaceWord.charAt(randomNo);
_content.replaceText(s1, s2, s3);
if(_cnt1>= _word.length - 1) _cnt1 = 0;
else _cnt1++;
}
else
{
var s4:uint = _shuffleArr[_cnt2];
var s5:uint = _shuffleArr[_cnt2] + 1;
var s6:String = _word.charAt(_shuffleArr[_cnt2]);
_content.replaceText(s4, s5, s6);
_cnt2++;
if(_cnt2>= _word.length)
{
_timer.stop();
}
}
_randomCnt++;
}
//------------------------------
// getter
//------------------------------
public function get time():uint
{
return _time;
}
//------------------------------
// setter
//------------------------------
public function set time(t:uint):void
{
_time = t;
}
}
}
使い方はテキストフィールドを引数にインスタンスを作ってstart()メソッドを呼ぶだけ。
ACTIONSCRIPT:
import info.five.filters.RandomText;
var randomText1:RandomText = new RandomText(myText1);
randomText1.start();
シャッフルスピードを変えるにはtimeプロパティを変える。（デフォルトは30）
ACTIONSCRIPT:
randomText1.time = 100;
テキストを変更するには、setText()メソッドの引数に文字列を与える。
ACTIONSCRIPT:
randomText1.setText("HOGE")
randomText1.start();
randomText1.start();