やっぱギークでナイト！

ひょんなことからお声掛けして頂き、露出狂友の会なる催しへ伺って参りました。

詳しくは、ゆーすけべー日記：露出狂友の会にゲスト参加してきた　を参照ください。



私が激人見知りするという事前情報をゲッツした道家さんが気を利かせてくれて
 早めに集まってお茶しましょうと提案して頂いたのでお言葉に甘えてティータイム！
優しいお心遣い本当に感謝です！

連れて行っていただいたのは、アップルパイの美味しいカフェ。
 注文が入ってから焼くので、出来立てのほっかほかが出てきます。
その上でバニラアイスが程よく溶けております。美味ーーー（目がはーと）

アートメーターにお邪魔させて頂いたり、こんな職場いいなあとかしながら、
明大前へのじゅうじゅうぼうぼうという焼肉屋さんへ。

皆さんの凄プレゼンを聞きながら食べるホルモンは格別でした。



（上）「エロサイトにおけるコンテンツマッチ型広告APIの自作」をプレゼンする和田さん

自分、本当もっともっと勉強しないと、と改めて実感。
やりたい事と出来る事のギャップを少しでも埋められるようになりたいものです。

そして皆さん、この度は素敵な会へお誘い頂き有難う御座いました！
またいつかお会いできたら嬉しいです。

永遠のアイドル（犬）でんすけでの勉強シリーズもひとまずここで一区切りという事で
でんすけとお散歩できるデスクトップアプリケーションを作りました。


練習4. でんすけとお散歩できるようにしてみよう。
(でんすけをデスクトップ上で動かす時にでんすけの挙動を色々設定してみる練習)

で、作ったものがこちら（下図）です。


前回の練習3では新規ウィンドウをドラッグして動かしましたが、
1) 最初に起動するウィンドウの表示位置の設定
2) ドラッグしている時、ドラッグを止めた時のでんすけの動き
を追加しました。

でんすけとお散歩のアプリケーション ( Installer Package ) は、以下からDL出来ます。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.air
アニメーションのクオリティは素人なのであれですが、よければお散歩してみてください。
(※) でんすけの胴体部分にドラッグの判定をつけました。
(※) でんすけの足元にある灰色のボタンをクリックすると終了します。


今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. Capabilities クラス

アプリケーション起動時に表示されるウィンドウをユーザーが実際に使っている画面の中央に表示させるためには、ユーザー環境に関する情報を取ってこなければなりません。
そういった際に使用するのがCapabilitiesクラスです。

ヘルプより引用

Capabilitiesクラスを使用すると、開発者はSWFファイルの実行環境に関する情報を取得できます。Capabilities クラスのさまざまなプロパティにより、ユーザーのシステムにおける画面解像度、
アクセシビリティソフトウェアに対するサポートの有無、ユーザーのオペレーティングシステムの言語、
および、現在インストールされている Flash Player のバージョンを知ることができます。

Capabilitiesクラスのプロパティ例：
　Capabilities.screenResolutionX  ：画面の水平解像度の整数
　Capabilities.screenResolutionY  ：画面の垂直解像度の整数

今回は、起動時のウィンドウを画面中央に表示させるたいので
解像度を調べて中央にするようx座標、y座標を計算させて、代入しています。

this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

ダウンロードも可能です。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.fla
http://geek.oyspe.com/air/densukesampo/DensukeSampo.as
http://geek.oyspe.com/air/densukesampo/Doggie.as

DensukeSampo.fla：でんすけのMovieClipが含まれています。
DensukeSampo.as：新規ウィンドウの作成、でんすけMovieClipの表示を記述しています。
Doggie.as：でんすけの動きの制御に関して記述しています。

DensukeSampo.asの中身

package {
   
    // インポート宣言
    // ステージの設定関係

    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.events.*;

    import flash.display.NativeWindow;
    import flash.display.NativeWindowType;
    import flash.display.NativeWindowInitOptions;
    import flash.display.NativeWindowSystemChrome;
    import flash.system.Capabilities;

    public class DensukeSampo extends Sprite {
       
        // Doggieクラスにはでんすけの動きの制御に関して記述しています。
        // 実際のでんすけのMovieClipはDensukeSampo.flaのライブラリ内にあります。
        private var wanwan:Doggie;
        private var newWin:NativeWindow;

        // 起動時に表示されるウィンドウの設定、GOボタンをリスナー登録する
        public function DensukeSampo() {
            this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            bt.addEventListener(MouseEvent.CLICK,createWindow);
        }
       
        // GOボタンをクリックすると新規ウィンドウ（でんすけのみの描画）を開く
        private function createWindow(e:MouseEvent):void {
            var options:NativeWindowInitOptions=new NativeWindowInitOptions;
            options.systemChrome=NativeWindowSystemChrome.NONE;
            options.type=NativeWindowType.LIGHTWEIGHT;
            options.transparent=true;
            newWin=new NativeWindow(options);
            newWin.width=240;
            newWin.height=210;
            newWin.title="でんすけ";
            newWin.visible=true;
            newWin.stage.scaleMode=StageScaleMode.NO_SCALE;
            newWin.stage.align = StageAlign.TOP_LEFT;
            wanwan=new Doggie();
            newWin.stage.addChild(wanwan);
            newWin.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            newWin.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            newWin.stage.nativeWindow.alwaysInFront=true;
            // でんすけの新規ウィンドウを開くと同時に、起動時のウィンドウは閉じることにしました。
            stage.nativeWindow.close();
        }
    }
}

Doggie.asの中身

package {
   
    // インポート宣言
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.events.MouseEvent;
   
    // でんすけの動き
    public class Doggie extends MovieClip {
        public function Doggie():void {
            this.stop();
            menu.buttonMode=true;
            bark_btn.buttonMode=true;
            // でんすけの足元のボタンをクリックでウィンドウを閉じる
            menu.addEventListener(MouseEvent.CLICK,doExit);
            // でんすけをドラッグする
            bg.addEventListener(MouseEvent.MOUSE_DOWN,moveWindow);
            // でんすけのドラッグを止める
            bg.addEventListener(MouseEvent.MOUSE_UP,stopWindow);
            // 顔をクリックするともぐもぐする
            bark_btn.addEventListener(MouseEvent.CLICK,doBark);
        }
       
        // でんすけの具体的な動き：でんすけMovieClipのフレーム指定で動きを設定
        private function moveWindow(e:MouseEvent):void {
            this.stage.nativeWindow.startMove();
            this.doWaking();
        }
        private function stopWindow(e:MouseEvent):void {
            this.doShippo();
        }
        private function doBark(e:MouseEvent):void {
            this.gotoAndStop(3);
        }
        private function doShippo() {
            this.gotoAndStop(1);
        }
        private function doWaking() {
            this.gotoAndStop(2);
        }
        private function doExit(e:Event) {
            this.stage.nativeWindow.close();
        }
    }
}

今回のご褒美ケーキは、
世田谷は 環七沿いにあるイタリアンレストランの BEVIAMOCI SU（ベビアーモチ スー）
で頂いたダークチェリーのタルトです。

「ダークチェリーのタルト」と聞いて想像していたものとは
ちょっと風体が異なるものが出てきましたが（チョコレートブラウニーっぽい外見）
苦甘いチョコレートとダークチェリーの酸味が程よく、うまうまデザートに満悦！

BEVIAMOCI SU（ベビアーモチ スー）
東京都世田谷区代田3-25-3
03-3414-9515
http://r.gnavi.co.jp/a912502/


大きな地図で見る

          

サボっていましたが、ついにAdobe AIR Beta3にアップデートしました。
忘れないようにメモ･･･

まずはAIRランタイムの準備：
Adobe AIR Beta2をアンインストールし、Beta3をインストールします。
Adobe AIR Beta 3 Installer
http://labs.adobe.com/downloads/air.html

次に、開発環境ですが
Adobe AIR update beta 3 for Flash CS3 Professionalをインストールする前に
Adobe Flash Player Update for Flash CS3 Professional (9.0.2)で
CS3をアップデートする必要があるらしいので、それもインストールします。
Adobe Flash Player Update for Flash CS3 Professional (9.0.2)
http://www.adobe.com/support/flash/downloads.html

さらに、Beta3アップデータでは削除できないBeta1およびBeta2のファイル
があるらしいのでそちらも削除しておきます。削除項目は下記の通り(Windows用)

* \Program Files\Adobe\Adobe Flash CS3\
AIKフォルダを削除する

* \Program Files\Adobe\Adobe Flash CS3\en\First Run\Commands\
下記ファイルがあれば削除する:
    - AIR - Application and Package Settings.jsfl
    - AIR - Package AIR File.jsfl

* \Document and Settings\<username>\Local Settings\Application Data\Adobe\Flash CS3\<lang>\Configuration\Commands\
下記ファイルがあれば削除する:
    - AIR - Application and Package Settings.jsfl
    - AIR - Package AIR File.jsfl
※ 隠しファイル/隠しフォルダが表示されていない場合はフォルダオプションで設定する。

では、Adobe AIR update beta 3 for Flash CS3 Professionalのインストール
Adobe AIR update beta 3 for Flash CS3 Professional[日本語版]
http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update#Japanese
※上記ダウンロードページにはBeta 1 CleanUp Scriptも有り

Adobe LabsにもHowto記述はあるのですが、下記のページでは日本語で分かりやすく説明されていたためアップデートの際にはそちらを参考させて頂きました。
参考にしたページ：
Adobe AIRで作るデスクトップアプリケーショ－第14回　Adobe AIRベータ3公開
http://gihyo.jp/dev/serial/01/adobe-apollo/0014

前回の練習2で作成したウィンドウは、
ウィンドウクロームをNONEに設定していたためドラッグして動かすことが出来ず、
画面に張り付いたままになっていました。
今回はこのウィンドウをドラッグ出来るようにしようと思います。


練習3．新しいウィンドウをドラッグしてみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成、画像を表示させ、
さらにドラッグ出来るようにする。）

以下を作りました。
OPENボタンで新規ウィンドウを作成、CLOSEボタンでウィンドウが閉じます。
ウィンドウにはでんすけMovieClipが表示され、描画部分をドラッグしてウィンドウを動かせます。

前回の練習で作ったソースに
1) ウィンドウを動かす
2) でんすけには指カーソル
を追加しました。



今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. ウィンドウを動かす startMove()

まずは、ウィンドウを動かす条件を設定し、イベントリスナーに登録します。

densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

イベントを受けて実行する処理内容は下のように記述しました。
NativeWindowクラスのstartMove()というメソッドを使います。

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

2. でんすけには指カーソル buttonMode

でんすけの描画範囲内では指カーソルにすることにしました。

densuke_mc.buttonMode = true;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
以下、今回のソースです。

ダウンロードも出来ます。
http://geek.oyspe.com/air/show_img_to_new_window_and_move/test4.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
    wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
    // でんすけの描画範囲内では指カーソルにする。
    densuke_mc.buttonMode = true;
   
    //でんすけの描画範囲内でドラッグするとそのままnewWindowをドラッグで移動させる
    densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

Adobe AIR Beta3がリリースされたようですが、
まだランタイムのみで日本語エクステンションはまだのようなので
引き続きBeta2でやっていこうと思います。

それでは、今回も引き続きairアプリの勉強です。
前回の練習1では、新規のウィンドウを作成したり閉じたりしましたが
ウィンドウの中には何も表示されていませんでした。
ですので今回は作成したウィンドウの中に描画をしようと思います。

練習２．新しいウィンドウに画像を描画してみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させ、中に画像を表示させる。）

以下を作りました。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックするとウィンドウが閉じます。
新規ウィンドウにはでんすけのMovieClip、Spriteで作成した円が描かれています。

前回の練習で作ったソース（新規のウィンドウを作成・閉じる）に
1) 画像の描画：円とでんすけ
2) ウィンドウ内の描画サイズをリサイズしないようにする
3) XY軸の調整
を追加しました。




今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. 新規のウィンドウに画像の描画

まずは表示させるための画像を用意します。
(円とでんすけのMovieClip）

■Sprite型の円

var circle:Sprite = new Sprite();
circle.graphics.beginFill (0xFFCC00);
circle.graphics.drawCircle (140, 200, 50);

■MovieClipのでんすけ

var densuke_mc:Densuke = new Densuke();

■ウィンドウへ追加
それぞれ新規のウィンドウ ( NativeWindow型のnewWindow ) のstageに直接追加しました。

newWindow.stage.addChild (circle);
newWindow.stage.addChild(densuke_mc);

2. 新規のウィンドウをリサイズした際に描画内容をリサイズしないようにする

ウィンドウをリサイズした際の領域内の設定内容については、
Stage.scaleModeプロパティの値に対してStageScaleModeクラスのパブリック定数を使います。
StageScaleModeクラスのパブリック定数には以下のようなものがあります。

    exactFit：指定領域内に、元の縦横比を維持しないで表示されます。
    noBorder：指定領域いっぱいに全体がゆがまずに表示されます。
    noScale：アプリケーションのサイズが固定されます。
    shoAll：指定領域内に全体が、元の縦横比を維持したままゆがまずに表示されます。

今回は、noScaleを使いますので、下記のように記します。

newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

※今回の練習の場合は、元々ウィンドウクロームをNONEに設定しているので、
実行時にウィンドウをリサイズしようにも不可能ですが。

また、StageScaleModeクラスを使用する際にはクラスのインポートが必要なので
冒頭で忘れずにインポートしておきます。

import flash.display.StageScaleMode;

3. 新規のウィンドウのXY(0,0)の設定

Stage.alignプロパティの値に対して、StageAlignクラスのパブリック定数を使い設定します。

今回はウィンドウの左上にXY(0,0)をもってくるために、以下のように記述しました。

newWindow.stage.align = StageAlign.TOP_LEFT;

また、StageAlignクラスを使いますので、クラスをインポートしておかなければなりません。

import flash.display.StageAlign;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

ダウンロードも可能です。
http://geek.oyspe.com/air/show_img_to_new_window/test3.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var circle:Sprite;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
     wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    circle = new Sprite();
    circle.graphics.beginFill (0xFFCC00);
    circle.graphics.drawCircle (140, 200, 50);
    newWindow.stage.addChild (circle);
   
    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

まだまだPapervision3Dを自由には使いきれていない状態ではありますが、
早くも次の項目へ進めることになり
次はAirアプリケーションの開発について学んでみることになりました。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Adobe Air とは：
アプリケーションの開発及び実行環境のことで、
既存のウェブアプリケーションの開発スキル
(HTML, Javascript, Adobe Flash, Adobe Flex, Ajax)
を使用しながらクロスプラットフォームなアプリケーションを作ることができる。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

フルFlashなデスクトップアプリケーションをFlashだけで作れてしまうので、
あなたもやってみなさい（by先生）とのこと。
Flex BuilderではなくCS3で作成します。

■ まず、Adobe AIR の実行環境をインストールします。
Adobe AIR Beta 2 Installer は以下からダウンロード出来ます。
Adobe Labs Downloads page http://labs.adobe.com/downloads/air.html

■ 次に、CS3用のエクステンション（日本語版）をインストールし開発環境を整えます。
Adobe AIR update Beta 2 for Flash CS3 Professional は以下からダウンロード出来ます。
Adobe Labs/ AIR:Flash CS3 Professional Update
http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update#Japanese


上記ふたつをインストールした後にFlashを起動すると、
Air用の新規作成メニューが追加されてることが確認出来ます。
新規作成メニューからAdobe Airを選択すれば、FlashでのAirアプリケーション開発が可能です。




それでは早速実作業へ。


練習1.  新しいウィンドウを作ってみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させる。）

そして作ったのが以下です。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックすると作成したウィンドウが閉じます。



練習をすすめる上でのメモとソースは下記に記しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. アプリケーション及びインストーラーの設定方法

アプリケーションの書き出しに必要な設定項目がいくつかあるので、
開発を進める前に準備してしまいます。



[コマンド]メニューから[AIR - Application and Installer Settings]をクリック。
以下のようなウィンドウが開くので、ファイル名、バージョン情報、コピーライト等々
アプリケーションの設定ファイル（app.xml）を生成します。



デジタル署名（上図赤枠参照）をしないとコンパイル時にエラーが起きてしまうので注意です。
また、ファイルの保存場所を変更したら、Destination Folderの書き換えも忘れずに。

諸設定の終了後、[コマンド]メニューから[AIR - Create AIR File]でコンパイル出来ます。
注：ディレクトリ構造内に日本語があるとエラーが出てしまいますのでご注意ください。


2. 新規ウィンドウの作成はNativeWindow()

新規ウィンドウを作成する時には次のように記述します。

var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
var newWindow:NativeWindow = new NativeWindow(wOption);

これは、
NativeWindowInitOptions型のオブジェクトwOptionに対して新規ウィンドウの設定を持たせ
さらにそのオブジェクトwOptionを
NativeWindow型のオブジェクトnewWindowをnewする際の引数とするためです。

また、NativeWindowInitOptions型のオブジェクトですが、
下記のように設定内容を持たせることが出来ます。

[1] wOption.type = NativeWindowType.NORMAL;

normalの他には、lightweight、utilityといったのプロパティがあります。
normal：タスクバー表示
lightweight：表示なし
utility：ツールパレット

[2] wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

standardの他には、none、customといったプロパティがあります。
none：ウィンドウクロームなし
standard：OS特有のクローム
custom：カスタム


* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

// 新規ウィンドウを作成するボタン、作成したウィンドウを閉じるボタン
bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;

// 新規ウィンドウの作成
// NativeWindowInitOptions型のオブジェクトに対して新規ウィンドウの設定を持たせて// NativeWindow型のオブジェクト(newWindow)をnewする際の引数とする。

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();

    //タスクバー表示
    wOption.type = NativeWindowType.NORMAL;

    //OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

    newWindow = new NativeWindow(wOption);
    newWindow.width = 200;
    newWindow.height = 100;
    newWindow.title = "hogehoge";
    newWindow.visible=true;

}

// 新規ウィンドウを閉じる
function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

無計画に描いたmemo004のでんすけのMovieClipを横から見ていた先生が
『アニメーターズ サバイバルキット』というアニメーションの本を貸してくれました。
曰く、でんすけの動きが不自然とのこと。先生、変なところが細かいです･･･と思いつつ
読みだすと非常に興味深い内容で、貸してくれて有難うございますと感謝です。

映画「ロジャー・ラビット」のアニメーション監督でもある名アニメーターのリチャード・ウィリアムズ氏が著された本で、生きたアニメーションの作成法について図を交えて丁寧に説明されています。
本格的にアニメーションを学びたい人向けではありますが、
私のようなアマチュアでもhow things work的な本として楽しむことが出来る一冊です。
かくして、当図解書を参考にしながら、でんすけのMovieClipを作り直してみることにしました。

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
動きの設計をする

アニメーションの動きの設計には
工学的とまではいわないものの、ある程度のメソッド的なものが存在するようで
その一つが、一連の動きをタイムラインに乗せた時にアクションをどのように区切り表現するかという事。
振り子の動きをアニメートさせる場合を例に、本で紹介されていた手順をまとめてみました。
(モーショントィイーン使えば一発ですがここはあえて。)


(1) まず最初に、重要な変化が生じる点を描きます。

まず、動きの中で方向に変化が生じる点を描きます。
両端に最大限振れるところ＝揺れの方向が変わる点がそれにあたります。

　　

この両端の点を「エクストリーム」と呼ぶそうです。

因みに、エクストリームの上位に「キーフレーム」があり ( FLASHのそれとは異なります。)
例えば、キャラクターが入室するところ、落し物を拾うところ、それを机に置くところ、といったものがそれにあたります。


(2) 次に、動きに特徴を持たせる中間点を加えます。

中間点は動きを特徴付ける上でとても重要で、下図を見ればその理由は一目瞭然です。

　　

この中間点のことを「パッシングポジション」と呼ぶそうです。


(3) 続いて、これらの点の間を補完する動きを加えていきます。

補完点の位置や数によってスピード感の調整が可能です。

　　

左の振り子は同じスピードで振れていますが、右の振り子には加速減速があります。

因みに、このアニメーションの基本構造を作成する手順は
「ポーズ・トゥー・ポーズ法」として紹介されていましたが、
著者はこの方法で作画した上で、その動きの流れをガイドとして使いながら、
もう一度初めから一枚ずつ作画していくと自由な発想の動きが得られるとしていました。

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
お題：この作画法で人が歩くアニメーションを作成してみましょう。

普段気にしながら歩いている訳ではないので、
実際に歩行のアニメーションを作画しようとすると意外と混乱します。

(1) まずはエクストリーム。

　　


(2) 次に中間点。軸足が伸びるので全体的に少し上へ。

　　


(3) 続けて間を補完するのですが、本書を読んでへえと唸ったのが
　　■ (緑) 膝が曲がって全体が低くなり、その時に腕の振りが最大になること
　　■ (青) 足が地面を蹴り全体が持ち上がること

　　


(1)～(3)の結果、出来上がったものが以下です。

　　

まだ粗が残っているものの、かろうじて歩いているように見えます。
この歩行アニメーションは一番ノーマルな歩きを描いたものですが、
中間点の描き方次第で動きに変化を持たせることが出来るみたいです。

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
お題：でんすけの歩行を修正してみましょう。

動物、特に四足動物の歩行は、人間が2人前後に並んで歩いているような動きになるそうです。
( 2組の歩行は若干ずれるそうで、動物の歩行をイメージすると、ああ、確かにと納得。)
なので、上で学んだ歩行の仕組みを応用します。
また、本書には動物のアニメーションの説明もあったのでそちらも参考に。

で、出来上がったものが以下です。前回のでんすけよりはそれっぽく見えるかな。

　　

今週末 ( 土曜日 ) は電脳コイルの最終回です。
終わってしまうのが寂しい限りです。

新たにでんすけとサッチー（たま）のMovieClipを作成したので
前回の歩くおやじに付け加えてみました。



実際の swf ファイル（角度を変えて見ることが出来ます）はこちらからどうぞ。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

でんすけとサッチー（たま）の描画については
前回のおやじを描画する時と同様の処理をしており
main.asファイルの中身は、追加の描画部分以外においてはほぼ前回と同じです。

今回作成したファイルは以下のふたつです。

Download:
Densuke_Oyaji_Tama_Walking.fla
main.as

注）動作させるにはPapervision3Dのライブラリが必要です。
　　ライブラリを含めて上記2ファイルをzipさせたものはこちら。

3回更新出来たら大好きなケーキ1個食っていいことにする。

ということで、ケーキを買いに出かけました。
本当はお目当ての大福があったのですが、
そこは日曜は定休日だった（調べておくんだった orz）ので
急遽、 玉川タカシマヤの Qu'il fait bon にて大好きなオレンジタルトを購入しました!



箱を開けるとそこは魅惑の、はあ、うまうま