yoppa.org

年の瀬

IMG_0603

昨晩の怒涛の忘年会をラストに、今年の主なイベントは終了。今年はTMUGを見にいったあたりから、急激に人の繋りが増えて嬉しい一年だった。30歳を越えるとなかなか友人ができずらいというが、この歳になって、20代の若い知人が増えるのは本当にありがたい。40前のおっさんを仲間に加えていただける方々にただただ感謝の一年だった。

忘年会の写真をみて、膨張した自分の姿に愕然としたので、来年はダイエットに励みます…

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

今日の内容

  • トウィーンを扱うライブラリを使用して、高度なアニメーション表現に調整
  • ライブラリにはTweenMaxを使用する
  • 様々なイージング関数を試してみる

Tweenライブラリ

TweenMax のダウンロード

TweenMaxを利用したインタラクティブなムービーの作成：基本

マウスをクリックした場所にTween

  • 必ずダウンロードしたフォルダ「greensock-tweening-platform-as3」の中にある「com」フォルダを、作成するflaファイルと同じ場所に置く
    • この中にあるAS3のライブラリを参照します
  • 画面にムービークリップを一つ配置する
  • ムービークリップのインスタンス名を「mc」に
  • タイムラインの第1フレームにスクリプトを記入
  • まず最初に、Tweenライブラリをインポートする
    • import com.greensock.*;
import com.greensock.*;
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY});
}

いろいろなイージング関数を試してみる

  • あらたにイージングのためのライブラリをインポートする
    • import com.greensock.easing.*;
  • TweenLiteの指定にイージングを追加する

指数関数によるイースイン・アウト

import com.greensock.*;
import com.greensock.easing.*;
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Expo.easeInOut});
}

バウント効果によるイースアウト

import com.greensock.*;
import com.greensock.easing.*;
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Bounce.easeOut});
}

ばねの動きによるイースアウト

import com.greensock.*;
import com.greensock.easing.*;
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Elastic.easeOut});
}

位置+サイズの変更

import com.greensock.*;
import com.greensock.easing.*;
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
var size:Number = Math.random() * 200;
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, width:size, height:size, ease:Elastic.easeOut});
}

TintPluginの利用：色の変化

ランダムに色が変化する

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void
{
var scale:Number = Math.random() * 4.0;
var color:Number = Math.random() * 0xffffff;
import com.greensock.plugins.*;
TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, scaleX:scale, scaleY:scale, tint:color, ease:Elastic.easeOut});
}

Tweenの連鎖：onCompleteの利用

Tweenが完了すると、すぐに新たなTweenを適用する

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
this.stage.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void {
myTween();
}
function myTween():void {
var scale:Number=Math.random()*4.0;
var color:Number=Math.random()*0xffffff;
var toX:Number=Math.random()*stage.stageWidth;
var toY:Number=Math.random()*stage.stageHeight;
import com.greensock.plugins.*;
TweenLite.to(this.mc, 1, {x:toX, y:toY, scaleX:scale, scaleY:scale, tint:color, ease:Elastic.easeOut, onComplete:myTween});
}

最終課題の予告

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

  • TweenMaxライブラリを使用して、インタラクティブな作品を作成してください
  • ユーザからの何らかの入力に反応するようにする
    • 基本：マウス、キーボード
    • 応用：音声、ネットワーク、外部センサー、時間 …etc.
  • 動きにはTweenMaxライブラリを利用すること
  • 課題の提出方法、締切などの詳細は、年明けの授業で連絡します

「脳内ニューヨーク」みたよ

いくつかの仕事が一段落したので、久しぶりに劇場で映画を観る。チャーリー・カウフマン初監督作品「脳内ニューヨーク」の最終日。16:40からの回、観客はは席の4割ほど。

久しぶりに劇場で観る映画でなぜこれを選んだかというと、主演のフィリップ・シーモア・ホフマンが好きなのだ。あのリアルなおっさん体系と圧倒的な演技の魅力に加えて、出演する作品に僕が個人的に好きな映画が多いからかもしれない。チャーリー・カウフマンの脚本した映画も「マルコビッチの穴」「ヒューマンネイチャー」「アダプテーション」「エターナル・サンシャイン」と見てきていて、どれも不条理で強烈な印象が残っている。「エターナル・サンシャイン」はここ数年観た映画の中で一番好きかもしれない。

以下映画の内容に何の配慮も無く触れていきますので、そのつもりで…

以前カウフマンは、自身が脚本した「アダプテーション」の中では実名で脚本家の役として登場し、脚本するという行為自体についてメタ的な視点で語っていた。今回は初の監督作品ということで、監督、演出するという行為について語っている。さらに言うと、このカウフマンの特性とも言える「メタな視点で語る」という行為自体について語りだしているので、物語は非常に複雑な様相になる。なぜなら、映画の中でその映画自身をメタな視点を語ろうと思うと、「メタな視点を語る」ことをメタな視点で語る必要があり、そのためには「『メタな視点を語る』ことをメタな視点で語る」ことをメタな視点で語る必要があり、さらには… 以下略。

カウフマンの分身として映画に登場するのが演出家役のホフマンなのだが、彼は愛人や主演女優に得意気に難解な喩えを駆使して演劇について語る。いわゆる「上から目線」というやつで。作品の中にそうした「上から」のメタな視点をもった自分を登場させようとしたとたんに無限ループのなかに嵌っていき、どんどん物語の入れ子構造の中に迷い込み、こじれていく。しかも、どんどん悲惨で救いのない方向へ。

もちろん、物語の中に入りこむことなく俯瞰した視点で語ってしまう悲しい主人公がカウフマンを投影しているのだろう。でもこの映画が難しいのは、こうした「○○は××を投影しているのだろう」というような安易な喩え自体の不毛さがテーマなので、いつまでたっても釈然とすることがない。最終的に「ひとりひとりに物語がある、人間って素敵やん」という紳助的な安易な深イイ話ではまとめられることなく、救いのないまま終ってしまう。

個人的にひとつ前の日記で、ちょっと暗く「中年の危機」について考えたタイミングで観たので、いろいろ感じ入るところがあった。巨大なセットの中での自身の物語が破綻すると、セットの中に一回り小さなセットをつくりその中に逃げこみ、それも破綻するとさらにその中の第三のセットに逃げ、という展開。また、物語の進行にあわせて、徐々に体の自由が効かなくなり、禿げて太り歯槽膿漏になり、といったリアルな加齢の描写が、自分自身の将来をみるようで厳しいものがあった。歳はとりたくないなあ…

映画の原題は"Synecdoche, New York"。Synecocheというのは「提喩」と訳されて、「現代のアインシュタイン」のように天才という上位概念を、アインシュタインという個別の下位概念で説明したり、「親子丼」のように鶏肉と玉子というものを上位の概念で説明することらしい。なるほど。

中年の危機?

今年もあと数週間で終わってしまう。ものすごく平凡な感想だが、あっという間に終わってしまった。

「ゼロ年代」ももうすぐ終わる。といっても、いままで「ゼロ年代」という言葉を実際に会話の中で使っている人に会ったことはないが。もしかしたら、あんまり一般的な用語ではなく、一部の批評系カルチャーの専門用語なのかもしれない。いずれにしても、2000年から2009年までの10年間は、僕個人にとっては特に際立った印象もなく、あまり何もないまま終わろうとしているような感じがする。とはいえ、この10年間を振り返ると、結婚をしたり、引越しをしたり、就職したり、またフリーランスに戻ったりといろいろあるにはあったが。

ここ10年ほど、あまり波風のない人生を送っているうちに、気がつくと40代が目前に迫ってきて愕然とする。数年前まで、自分が40歳になるなんて想像がつかなかった。いや、今もあまり信じられない。中の人格は中学生くらいのころから全然変化していないような気がする。とはいえ、最近iPhoneからustreamしようとして、スクリーンに映った自分の顔をみると、どこからみても40歳手前のオッサンの顔だったのだが。

最近、周囲の同年代の知人を見ると、自分を含めていろいろ悩んでる人が多いように感じる。徐々に人生の残り時間が意識されるようになってきて、それと比較して自分の今までやってきたことは果してこれで良いのだろうかと考えてしまうのかもしれない。こういうのを「中年の危機」っていうのかな? 違うかもしれないけど。

ちょっと気になってググってみた → ミッドライフ・クライシス（中年の危機）

いろいろ興味深いのだが、引用されていたユングの講義中の発言が、特に参考になる。

年をとれば、自分自身や世界などの両義性を知ることがきわめて重要になってきます。疑うことは知恵の始まりです。人生の価値を疑い始めることはきわめて重要であり、そうして世界の錯綜から自らを解放することができるようになるのです。若い人たちは疑いの中で生きることができません。人生に対して深刻な疑いをもてば、世界に入っていけなくなります。しかし成熟した人は世界からもっと分離すべきです。人生の半ばをすぎれば、それは完全に正常なことです。

この「人生の価値を疑い始めること」という部分に、なるほどなと思う。

若い頃は、自分の人生で一度くらいは、才能が花開き、大勢の人から評価され、社会的な地位が得られる時期が来るに違いないという、根拠のない自信のようなものが漠然とあった。でも、30代後半になったいま、もしかしたら一生そういう時期は訪れないのかもしれないと思うようになる。考えてみると、世の中の大半の人は世の中に広く知られることなく無名のまま死んでいくのだから、自分もその一人に過ぎないんじゃないかと考えるようになる。そうした現実が徐々にリアルになるにつれて、焦ってくるのかもしれない。

まあ、有名になることだけが人生ではないので、後半戦いかに自分にとって充実したことができるか、ということなのかもしれない。ただ悩んでいてもしょうがない。さっきのページの最後のセンテンスにぐっとくる。

この「危機」を乗り越えようとする過程で多くの人が体験することのイメージとして、「夜の海の航海(night sea journey)」があります。心が暗闇の中にあって、出口の光が見えず長らく低迷する状態です。しかし、航海がそうであるように、いつかは闇の世界から脱出する時が来ます。

そうなるといいなあ。

記事を追加するサンプルです

みだしです

本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。

みだしです

本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。本文をここに入れてみます。

第9回：ActionScript3.0：ムービープレーヤーを作る

本日の内容

  • ActionScript 3.0 を用いたより実践的なプログラミングに挑戦する
  • より具体的な機能をもったユーザーインタフェイスを作成してみる
  • ムービプレーヤーを作成する
    • Webで動画を表示・操作することのできる、簡単なムービプレーヤーを作成する
    • コンポーネントを効果的に使用すると、意外と容易に作成可能

完成イメージ

制作テンプレートのダウンロード

まず最初に制作のためのテンプレートを下記からダウンロードしてください。

ムービープレーヤーの作成手順

FLVPlayerの配置
  • ウィンドウ → コンポーネント を開く
  • Videoの中からFLVPlaybackを選択して、ステージ上に配置する
  • FLVPlayqバックを選択して、プロパティウィンドウのパラメータのタブを選択して下記のように設定する
    • インスタンス名：theVideo
    • autoPlay : true
    • scaleMode : noScale
    • skin : パラメータのコラムを選択した状態で、右側の虫めがねのアイコンをクリックする
      • skinの選択画面が表示されるので、リストから SkinUnderPlayStopSeekMuteVol.swf を選択
    • source : パラメータのコラムを選択した状態で、右側の虫めがねのアイコンをクリックする
      • 再生するムービーファイルのコンテンツパスを設定する画面が表示される
      • Popeye_forPresiden768K_000.flv を指定する
  • この状態で一旦ムービーのプレビューをしてみる
    • 画面上でオープニングのムービーが再生されるはず
シーン選択ボタンの配置
  • コンポーネントウィンドウを開く (ウィンドウ → コンポーネント)
  • User Intreface から Buttonを選択
  • ステージ上に、6つボタンを配置する
  • それぞれのボタンのパラメータを次のように設定する
    • インスタンス名: scene0、Label : Scene 0
    • インスタンス名: scene1、Label : Scene 1
    • インスタンス名: scene2、Label : Scene 2
    • インスタンス名: scene3、Label : Scene 3
    • インスタンス名: scene4、Label : Scene 4
    • インスタンス名: scene5、Label : Scene 5
スクリプトの記述
  • actionsのレイヤーに移動して、フレーム内に下記のフレームスクリプトを記述する
this.scene0.addEventListener(MouseEvent.CLICK, showScene0);
this.scene1.addEventListener(MouseEvent.CLICK, showScene1);
this.scene2.addEventListener(MouseEvent.CLICK, showScene2);
this.scene3.addEventListener(MouseEvent.CLICK, showScene3);
this.scene4.addEventListener(MouseEvent.CLICK, showScene4);
this.scene5.addEventListener(MouseEvent.CLICK, showScene5);
function showScene0(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_000.flv";
}
function showScene1(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_001.flv";
}
function showScene2(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_002.flv";
}
function showScene3(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_003.flv";
}
function showScene4(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_004.flv";
}
function showScene5(event:MouseEvent):void
{
this.theVideo.source = "Popeye_forPresiden768K_005.flv";
}
完成!
  • 画面タイトルなどをデザインしたら完成!

140文字で思考する

昨日、Twitterのウィジットについてこのブログにメモしたら、なんだか急に更新意欲が出てきた。というわけで、久しぶり(調べてみたら、何と2ヶ月ぶり)にここを更新。

散々言い尽くされてきたことではあるので、いまさら表明することでもないのだけれど、Twitterを始めるとブログの更新意欲が激減してしまった。Twitterに嵌ってしまった多くの人が共通して感じている現象だと思う。

Twitterの存在を知ってまず驚くのが、140文字制限という枠組みだ。そんな少ない文字数じゃ何も語れないよと誰もが最初は思う。ところがいざ始めてみると、大概のことは140文字で事足りてしまう。そうすると、「なんだこれだけでいいじゃん」ということになり、今までブログに書き散らしていた文章は、何て冗長なものだったのかと思うようになる。

一度140文字の枠に慣れてしまうと、何かがあると、とりあえず140文字以内で書くことが習慣化して、それ以上書くこと自体が段々と億劫になってしまう。Twitterの成功の秘訣はこの140文字という設定が絶妙だったせいもあるのかもしれない。ちょうど、思いついたことをとりあえずそのまま書くのにちょうど良い分量。あまり短いと言いたいことが書ききれないけど、それ以上書くとなるともうすこしテーマを掘り下げないといけない。そして、単純な思いつきから長文へするにあたって、そのテーマについてさらに奥深く入りこんでいく作業が思いの外面倒くさい。書いているうちに飽きてしまって、結局アップしなかったりすることもある。

まあ、極端なことを言えば、日常の仕事でやっている大概のことは140文字で表現できる程度の内容だったりする。そんなに頻繁には、根本的なところからロジカルに考えるようなことはしていない。大抵は一度やったことの繰り返しだったり、普段やっていることにちょっと変化を加えたりしながら、日々の仕事をこなしている。

Twitterも楽しいけど、たまにブログくらいの文章は書くようにしないと、深い思考をすることなくどんどん条件反射で日々が過ぎてしまって、ちょっと良くないかもしれない、と思った。

でも、ここまでの内容を、もしTwitterで

「Twitterの140文字の枠組みだけで考えてたらマズいよな。たまにはブログも更新しよう。」

と書けば済んでしまうような気もする。うーむ。

Twitterのブログ貼り付けメモ

Twitterから提供されている方法(オフィシャル版)

  • HTML + Javascript版
    • シンプルにHTMLのみを出力。リスト形式で指定した個数の投稿を列挙する。
    • 書き出されたHTML全体が、<div id="twitter_div">で囲まれているので、#twitter_idをセレクタにしてCSSでデザインすることで、自由にカスタマイズ可能。
  • Flash版
    • 2つのバージョン
    • Interactive
      • 指定した個数の投稿を表示、スクロールバーで上下に
    • Display-only
      • 一つずつ、投稿を表示
  • 作成方法
    • http://twitter.com/badges/ にアクセス、作成したいidでログインする。
    • "Where do you want to put it?" の選択を"Other"にしてContinue
    • Flash or HTMLを選択
    • Flash
      • Interactice or Display-onlyを選択
      • プレビューを確認しながら、パラメータを調整
      • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト
    • HTML
      • 表示する投稿数、タイトルを設定
      • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト

出力サンプル：HTML+ Javascript版


HTMLソース

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/tadokoro" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/tadokoro.json?callback=twitterCallback2&amp;count=5"></script>

出力サンプル：Flash版 – Interactive

HTMLソース

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="290" height="350" id="TwitterWidget" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="userID=9986412&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml">
<embed src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" quality="high" bgcolor="#000000" width="290" height="350" name="TwitterWidget" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="userID=9986412&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>
</object>

出力サンプル：Flash版 – Display-only

follow tadokoro at http://twitter.com

HTMLソース

<div style="width:176px;text-align:center">
<embed src="http://twitter.com/flash/twitter_badge.swf"  flashvars="color1=16594585&type=user&id=9986412"  quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br>
<a style="font-size: 10px; color: #FD3699; text-decoration: none" href="http://twitter.com/tadokoro">follow tadokoro at http://twitter.com</a></div>

Twitterから提供されている別の方法(HTML + Javascript)

  • Twitterで提供されている別のウィジット
  • Javascriptを使用
  • Twitter / Widgetsにアクセス http://twitter.com/widgets
  • "Widgets for…" で "My Website" を選択
  • "Profile Widget" を選択
  • 各種設定を調整
    • Settingで"Username" を設定
    • Preferenceでプレビューで見ながらパラメータを調整
    • Appearanceで色を設定
    • Dimensionsでサイズを設定
  • 調整が完了したら"Finish & Grab Code"をクリック
  • テキストエディト欄に表示されているHTMLコードをコピーして、自分のページにペースト

出力サンプル


HTMLソース

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#eeeeee',
color: '#666666'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#0000ff'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('tadokoro').start();
</script>

その他、サードパーティー製