継続

• ランニング：9.03km, 60.16min, 729kcal

今日もコンスタントに9km/hで走るメニューで60分。このペースで全然負荷が感じられないくらいまで継続してトレーニングすれば、20kmくらい走れるようになりそうな気がする。それにしても体重は全然減らない。脂肪が筋肉になっていると信じつつ、継続。

ライブするよー

1月30日に千駄ヶ谷にあるloop-lineでAkihiro Kubota Laptop Jazz Quartetの一員としてライブします。ライブ久しぶりだなあ。現在、久保田さんのブレッドボードギターに対抗する手段を思案中。ぜひお越しくださいませ。

2010年01月30日

archetype extra PLUGDEAD presents “Extreme Modeling vol.1”

open 19:00 start 19:30
charge 1,500yen (+1drink)

• PLUGDEAD
• Kawashima Circulation Bus Line (Akane Hosaka + DJ Peaky)
• Akihiro Kubota Laptop Jazz Quartet

ぴったり

• ランニング：9.0km, 60min, 721kcal

今回は、しょっぱなから9km/hで走り出して、そのまま60分スピードは維持したままで走ってみた。というわけで、距離はちょうど9kmジャスト。がんばってあと1km速く走れば、1時間に10km走れてしまう計算になるが、その1kmの体感負荷が予想以上に重い。40℃の風呂と45℃の風呂の体感温度がまるで違うようなものかも。人間の感覚はそこそこ繊細。

最終課題について

最終課題：TweenMaxライブラリを使用して、インタラクティブな作品を作る

TweenMaxライブラリを使用して、インタラクティブな作品を作成してください

• ユーザからの何らかの入力に反応するようにする
  • 基本：マウス、キーボード
  • 応用：音声、ネットワーク、外部センサー、時間 …etc.
• 動きにはTweenMaxライブラリを利用すること
• 提出締切：2010年2月1日(月)
• 授業で一人一人発表してもらいます

課題の提出方法

パブリッシュした作品を、下記の場所にアップロードすること

• http://www.cuc.ac.jp/~[自分のログイン名]/webmov/final/index.html

今日は、課題の提出方法を確認の後、課題制作の実習とします。

目標達成

• ランニング：9.1km, 60min, 735kcal

ここしばらく目標としていた、1時間走で9km走るという目標達成! 予想してたより早く到達できた。素直に嬉しい。本来ならここで時間を増やしていくのが正しいのだと思うのだけれど、ティップネスのランニングマシーンは占有できる時間制限が60分のルールになっていて、それ以上の時間は連続して走れない。なので、しばらくはコンスタントに9km/hのペースで走れるようにトレーニングしてみようかと思う。たまには外を2時間くらい走ってみるのも楽しそうなんだけど、寒いしなあ…

体が馴れてきたような

• ランニング：8.82km, 60min, 705kcal

いろいろ用事がありジムに行くことができず、3日ぶりのトレーニング。休養十分なためか、1時間走の記録を更新。当面の目標の9km/hが目前に見えてきた感触。後半バテなければ達成できそうな気がする。とはいえ、無理せず楽しくやっていくことが肝要なので、あまり距離にこだわりすぎるのも良くないかも。

最近は1時間走り終えても、腿が張ったり足が痛くなることもなく、シャワー浴びた後、すぐそのまま歩いて家まで普通に帰れるようになった。体が走るという運動にようやく順応してきたのかも。こうなると、走った後しばらくは脳内麻薬が出まくっている感じで、なんとも言えない爽快感。

写真は最近購入したhipstamaticというiPhoneアプリで撮影した画像。レンズやフィルムをいろいろ変更することができて楽しい。

第11回：ActionScript 3.0応用：Tweenライブラリを使用したアニメーション表現(2)

今回の内容

前回のTweenMaxを利用したアニメーション表現の応用を行います。前回は1つのムービークリップをステージに配置してTweenを行いましたが、今回は大量のムービークリップを扱う方法について考えていきます。

リンケージ

今回はムービークリップを100個程度ステージに配置して、それをTweenライブラリを使用していろいろ操作する方法について考えていきます。

大量のムービークリップ(100〜1000位のオーダー)を一括して扱おうと考えた際に、最初に直面する課題が、どうやってムービークリップをステージ上に配置するかという点です。手作業でステージに貼っていっていては、とても手間がかかってしまいます。

こうした際に便利な方法として、リンケージという方法があります。リンケージとはライブラリに登録したムービークリップシンボルやサウンドなどのリソースにクラス名をつけ、ActionScriptから動的に読みだしてきるようにする仕組みです。リンケージを用いることで、ムービークリップシンボルを手動でステージに追加しなくても、スクリプト側から配置することが可能となります。リンケージを用いる際には、ライブラリに格納したアイテムであらかじめリンケージの設定をしておく必要があります。

リンケージを設定する

• 新規にムービークリップを作成
• ライブラリに表示されたムービークリップシンボルを右クリックして「プロパティ」を選択
• 「詳細」ボタンを押す
• 「リンケージ」の欄を設定
  • 「ActionScript用に書き出し」をチェック
  • 「1フレーム目に書き出し」をチェック
  • 「クラス」にクラス名を指定 – 例) Circle
  • 基本クラス「flash.display.MovieClip」はそのままで

この操作により、ActionScriptから、Circleクラスを生成することで新規にステージ上にムービークリップを作成できるようになりました。

ステージにリンケージしたムービークリップを配置する

タイムラインの1フレーム目に下記のスクリプトを記述します。画面の中心にムービクリップが表示されるはずです。

var circle:CircleMc = new CircleMc();
this.addChild(circle);
circle.x = stage.stageWidth / 2;
circle.y = stage.stageHeight / 2;

配置したムービークリップに、イベントリスナーを設定

配置したムービークリップに、マウスのロールオーバーとロールアウトのイベントリスナーを設定してみます。ロールオーバーすると元の2倍の大きさに変化するようにしてみます。変化する際には、TweenMaxを使用してなめらかにTweenするようにします。

import com.greensock.*;
import com.greensock.easing.*;

var circle:CircleMc = new CircleMc();
this.addChild(circle);
circle.x = stage.stageWidth / 2;
circle.y = stage.stageHeight / 2;
circle.addEventListener(MouseEvent.ROLL_OVER, circleRolloverHandler);
circle.addEventListener(MouseEvent.ROLL_OUT, circleRolloutHandler);

function circleRolloverHandler(e:MouseEvent):void
{
    TweenLite.to(circle, 1, {scaleX:3.0, scaleY:3.0, ease:Elastic.easeOut});
}

function circleRolloutHandler(e:MouseEvent):void
{
    TweenLite.to(circle, 1, {scaleX:1.0, scaleY:1.0, ease:Elastic.easeOut});
}

ムービークリップを複製する

リンケージしたムービークリップを配置する方法を応用して、大量のムービークリップをステージ上に配置してみましょう。配置したムービークリップにはロールオーバーとロールアウトのイベントリスナーが全てに適用されています。

イベントリスナーでTweenを指定する際のターゲット「e.target」というのは、イベントリスナの引数から取得した、そのマウスイベントが発生したシンボルを特定するための工夫です。この方法で、イベントが発生しているターゲットを知ることが可能です。

import com.greensock.*;
import com.greensock.easing.*;

for (var i:int = 0; i<100; i++) {
    var circle:CircleMc = new CircleMc();
    this.addChild(circle);
    circle.x=Math.random()*stage.stageWidth;
    circle.y=Math.random()*stage.stageHeight;
    circle.alpha=0.5;
    circle.scaleX = circle.scaleY = Math.random()+0.2;
    circle.addEventListener(MouseEvent.ROLL_OVER, circleRolloverHandler);
    circle.addEventListener(MouseEvent.ROLL_OUT, circleRolloutHandler);
}

function circleRolloverHandler(e:MouseEvent):void {
    TweenLite.to(e.target, 1, {scaleX:2.0, scaleY:2.0, ease:Elastic.easeOut});
}

function circleRolloutHandler(e:MouseEvent):void {
    var scale:Number = Math.random()+0.2;
    TweenLite.to(e.target, 1, {scaleX:scale, scaleY:scale, ease:Elastic.easeOut});
}

配置したムービークリップを連続してTweenする

ステージに配置したムービークリップの位置を、連続してTweenで移動してみます。移動のための関数、moveTweenを定義しています。この関数内で、Tweenが1回分行います。Tweenが完了すると(onComplete)自分自身の関数が再帰的に呼び出され、連続した移動を実現しています。

import com.greensock.*;
import com.greensock.easing.*;

for (var i:int = 0; i<100; i++) {
    var circle:CircleMc = new CircleMc();
    this.addChild(circle);
    circle.x=Math.random()*stage.stageWidth;
    circle.y=Math.random()*stage.stageHeight;
    circle.alpha=0.5;
    circle.scaleX=circle.scaleY=Math.random()+0.2;
    moveTween(circle);
}

function moveTween(mc:MovieClip):void {
    var moveX=Math.random()*stage.stageWidth;
    var moveY=Math.random()*stage.stageHeight;
    TweenLite.to(mc, Math.random()*2.0+1.0, {
	x:moveX,
	y:moveY,
	ease:Expo.easeOut,
	onComplete:moveTween,
	onCompleteParams:[mc]
    });
}

マウスイベントによる動作の切り替え

連続して移動するムービークリップの移動中に、ステージをマウスダウンするとマウスの周囲に全てのムービクリップが移動してくるように、イベントリスナーを定義します。マウスアップすると連続移動(moveTween)を再開します。全てのムービークリップにTweenやmoveTween関数を設定する必要があることから、ステージにムービクリップを配置する際に、配列「circleArray」に作成したムービクリップを格納しています。

import com.greensock.*;
import com.greensock.easing.*;

var circleArray:Array = new Array();

for (var i:int = 0; i<100; i++) {
    var circle:CircleMc = new CircleMc();
    this.addChild(circle);
    circle.x=Math.random()*stage.stageWidth;
    circle.y=Math.random()*stage.stageHeight;
    circle.alpha=0.5;
    circle.scaleX=circle.scaleY=Math.random()+0.2;
    moveTween(circle);
    circleArray.push(circle);
}

function moveTween(mc:MovieClip):void {
    var moveX=Math.random()*stage.stageWidth;
    var moveY=Math.random()*stage.stageHeight;
    TweenLite.to(mc, Math.random()*2.0+1.0, {
	x:moveX,
	y:moveY,
	ease:Expo.easeOut,
	onComplete:moveTween,
	onCompleteParams:[mc]
    });
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(event:MouseEvent):void {
    for (var i:int=0; i<circleArray.length; i++) {
	TweenLite.to(circleArray[i], 5.0, {
	    x:this.mouseX,
	    y:this.mouseY,
	    ease:Elastic.easeOut});
    }
}

function mouseUpHandler(event:MouseEvent):void {
    for (var i:int=0; i<circleArray.length; i++) {
	moveTween(circleArray[i]);
    }
}

色を変化させる

TweenMaxのtint機能を使用して、Tweenするたびに色がランダムに変化するようにしてみます。

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var circleArray:Array = new Array();

for (var i:int = 0; i<100; i++) {
    var circle:CircleMc = new CircleMc();
    this.addChild(circle);
    circle.x=Math.random()*stage.stageWidth;
    circle.y=Math.random()*stage.stageHeight;
    circle.alpha=0.5;
    circle.scaleX=circle.scaleY=Math.random()+0.2;
    moveTween(circle);
    circleArray.push(circle);
}

function moveTween(mc:MovieClip):void {
    var moveX=Math.random()*stage.stageWidth;
    var moveY=Math.random()*stage.stageHeight;
    var color:Number = Math.random()*0xffffff;
    TweenLite.to(mc, Math.random()*2.0+1.0, {
	x:moveX,
	y:moveY,
	tint:color,
	ease:Expo.easeOut,
	onComplete:moveTween,
	onCompleteParams:[mc]
    });
}

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(event:MouseEvent):void {
    for (var i:int=0; i<circleArray.length; i++) {
	TweenLite.to(circleArray[i], 5.0, {
	    x:this.mouseX,
	    y:this.mouseY,
	    ease:Elastic.easeOut});
    }
}

function mouseUpHandler(event:MouseEvent):void {
    for (var i:int=0; i<circleArray.length; i++) {
	moveTween(circleArray[i]);
    }
}

マウスの位置を時間をずらしながら追いかける

最後に、マウスの座標を順番をずらしながら、追いかけるサンプルを作成してみましょう。

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([TintPlugin]);

var circleArray:Array = new Array();
var i:int;

for (i=0; i<50; i++) {
    var circle:CircleMc = new CircleMc();
    this.addChild(circle);
    circle.x=stage.stageWidth/2;
    circle.y=stage.stageHeight/2;
    circle.scaleX = circle.scaleY = i*0.1;
    circleArray.push(circle);
}

setMoveChane();

function setMoveChane() {
    for (i=0; i<50; i++) {
	TweenMax.to(circleArray[i], 10, 
		    {
			x:mouseX, 
			y:mouseY, 
			delay:i*0.1, 
			ease:Elastic.easeOut, 
			overwirte:0
		    });
    }
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mosemoveHandler);

function mosemoveHandler(e:MouseEvent):void {
    setMoveChane();
}

エアロ

• エアロバイク：24.6km, 65min

膝がなんかポキポキする感触なので、大事をとって今日はエアロバイク、24.6km。腿がつかれた。帰りに三宿にある中華のお店「新記」でセットメニューを頼んだら、あっさりとした麺と肉を載せた御飯。炭水化物たっぷり。

またちょっと前進

• ランニング：8.67km, 60min

木曜日はジム定休日なので、1日おいてのランニング。また1時間に走る距離がちょっと伸びた。9km台が見えてきたかも。このペースで徐々に調子を上げていきたい所存。

PDF埋め込みテスト

Google DocsでPDFをページに埋め込むテスト。

SlideShareよりも、こっちのほうが快適かもしれない。テキストがすぐにコピーできるのが良い。ただ、画像の劣化が激しいのが難点か。