2008年4月アーカイブ
休み前なので立て続けですが。
たぶん休み中は更新しないです。あしからず。
Progression用のモーション系のコマンドをいくつか作りました。
せっかくなのでアップしておきます。
作ったといっても、AS2からずっと使ってる自前のモーションクラスをコマンド用に書き換えただけなんですが。
もちろん、みんなが安心、Tweenerをベースにしなおしといたんで、そのまま使うなり改良するなり、煮るなり焼くなりご自由に。
ただしProgressionのバージョンが2.1.xにバージョンアップすると使えなくなる可能性大です。
そのうち対応するとは思いますが。←僕が
あと、はじめに言い訳しておくと、パッケージ名がCroquisですが、
fladdictさんのsketchbookの名前をパクリました。すいません。（中身はパクってません）
というのも、なんかここまでいろんな便利ライブラリが出回ってると、自分でなんか作る気もしないので
とりあえずProgressionをベースに世のオープンソースなライブラリを自分用にまとめてショートカットクラスなんかにしちゃってるわけです。
sketchbookからSparkのutilsとかColorMatrixとかとか
そこまでくると、どこまで公開してもいいのか良く分からんし、あんまり大きな声じゃ言えないんですが。
んで、以下はその中の一部ってことです。はい。
ところで余談なのですが、SparkのUtilクラスってホントに勝手に書き足したやつとかコミット（？）しちゃっていいんだろうか。
あと、どれくらいUtil系そろえるつもりなんだろう。とにかく万能Utilにしちゃうんだろうか。
それとも他で出てるものとはかぶらない様にとかあるんだろか。
もしとにかく何でもってんなら、少しは貢献できるかもしれないけども。
なんかあの辺の人たち凄すぎて気後れしちゃうよ。
へむへむ。
でわでわ。以下デモになります。
ソースファイルはこちら。
croquis.zip
以下、このデモに含まれるクラス。
◆クラス一覧
基本クラス
croquis.motions.Motion
移動用コマンドクラス
croquis.motions.Linear
croquis.motions.Curve
croquis.motions.Cycle
croquis.motions.Wave
croquis.motions.Twist
croquis.motions.Bug
変形用コマンドクラス
croquis.motions.Trans
着色用コマンドクラス
croquis.motions.FillColor
◆簡易リファレンス
croquis.motions.Motion
Motion( type:String, time:Number, transition:String=null, delay:int = 0 )
Motionクラスのベースになるクラスです。
このクラスは直接インスタンスを生成することができません。
作成する場合は必ずサブクラスを作成します。
croquis.motions.Linear
Linear(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, transition:String=null, delay:int=0)
指定座標まで直進します。
croquis.motions.Curve
Curve(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, angle:Number = 0.0, radius:Number=0.0, transition:String=null, delay:int=0)
指定座標まで弧を描いくように移動します
croquis.motions.Cycle
Cycle(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, round:Number = 0, clockwise:Boolean = true, transition:String=null, delay:int=0)
指定座標を中心に回転しながら移動します
croquis.motions.Wave
Wave(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, swing:Number = 0.0, transition:String=null, delay:int=0)
指定座標までの直線軸を中心に揺れながら移動します
croquis.motions.Twist
Twist(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, round:Number = 0.0, clockwise:Boolean = true, transition:String=null, delay:int=0)
指定座標までの直線軸を中心に回転しながら目標点に移動します。
croquis.motions.Bug
Bug(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, turnSpeed:Number=0.05, transition:String=null, delay:int=0)
不規則な動作をしながら指定座標まで移動します
croquis.motions.Trans
Trans(target:DisplayObject, time:Number = 1.0, scaleX:Number = 1.0, scaleY:Number = 1.0, rotation:Number=0.0, basePoint:Point=null, transition:String=null, delay:int=0)
任意の座標を中心に DisplayObject インスタンスを回転、及び拡大縮小させます
croquis.motions.FillColor
FillColor(target:DisplayObject, time:Number = 1.0, colorTransform:ColorTransform = null, transition:String = null, delay:int = 0)
ColorTransform によって DisplayObject インスタンスに着色します
追記：
executeボタンを押したときに前回のコマンドが実行中の場合、前回のコマンドを停止してから実行するようにしました。
上記の一覧のクラスには変更はありません。
たぶん休み中は更新しないです。あしからず。
Progression用のモーション系のコマンドをいくつか作りました。
せっかくなのでアップしておきます。
作ったといっても、AS2からずっと使ってる自前のモーションクラスをコマンド用に書き換えただけなんですが。
もちろん、みんなが安心、Tweenerをベースにしなおしといたんで、そのまま使うなり改良するなり、煮るなり焼くなりご自由に。
ただしProgressionのバージョンが2.1.xにバージョンアップすると使えなくなる可能性大です。
そのうち対応するとは思いますが。←僕が
あと、はじめに言い訳しておくと、パッケージ名がCroquisですが、
fladdictさんのsketchbookの名前をパクリました。すいません。（中身はパクってません）
というのも、なんかここまでいろんな便利ライブラリが出回ってると、自分でなんか作る気もしないので
とりあえずProgressionをベースに世のオープンソースなライブラリを自分用にまとめてショートカットクラスなんかにしちゃってるわけです。
sketchbookからSparkのutilsとかColorMatrixとかとか
そこまでくると、どこまで公開してもいいのか良く分からんし、あんまり大きな声じゃ言えないんですが。
んで、以下はその中の一部ってことです。はい。
ところで余談なのですが、SparkのUtilクラスってホントに勝手に書き足したやつとかコミット（？）しちゃっていいんだろうか。
あと、どれくらいUtil系そろえるつもりなんだろう。とにかく万能Utilにしちゃうんだろうか。
それとも他で出てるものとはかぶらない様にとかあるんだろか。
もしとにかく何でもってんなら、少しは貢献できるかもしれないけども。
なんかあの辺の人たち凄すぎて気後れしちゃうよ。
へむへむ。
でわでわ。以下デモになります。
ソースファイルはこちら。
croquis.zip
以下、このデモに含まれるクラス。
◆クラス一覧
基本クラス
croquis.motions.Motion
移動用コマンドクラス
croquis.motions.Linear
croquis.motions.Curve
croquis.motions.Cycle
croquis.motions.Wave
croquis.motions.Twist
croquis.motions.Bug
変形用コマンドクラス
croquis.motions.Trans
着色用コマンドクラス
croquis.motions.FillColor
◆簡易リファレンス
croquis.motions.Motion
Motion( type:String, time:Number, transition:String=null, delay:int = 0 )
Motionクラスのベースになるクラスです。
このクラスは直接インスタンスを生成することができません。
作成する場合は必ずサブクラスを作成します。
croquis.motions.Linear
Linear(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, transition:String=null, delay:int=0)
指定座標まで直進します。
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Curve
Curve(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, angle:Number = 0.0, radius:Number=0.0, transition:String=null, delay:int=0)
指定座標まで弧を描いくように移動します
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 angle 始点から終点までの中点からの中継点の角度 radius 始点から終点までの中点からの中継点までの半径 transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Cycle
Cycle(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, round:Number = 0, clockwise:Boolean = true, transition:String=null, delay:int=0)
指定座標を中心に回転しながら移動します
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 round 回転数 clockwise 時計回り（true） 反時計回り（false） transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Wave
Wave(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, swing:Number = 0.0, transition:String=null, delay:int=0)
指定座標までの直線軸を中心に揺れながら移動します
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 radius 初期振幅距離 swing 振動回数 transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Twist
Twist(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, round:Number = 0.0, clockwise:Boolean = true, transition:String=null, delay:int=0)
指定座標までの直線軸を中心に回転しながら目標点に移動します。
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 radius 回転半径 round 回転数 clockwise 時計回り（true） 反時計回り（false） transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Bug
Bug(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, turnSpeed:Number=0.05, transition:String=null, delay:int=0)
不規則な動作をしながら指定座標まで移動します
target 対象となるオブジェクト time 移動時間 x 目標X座標 y 目標Y座標 turnSpeed 向きを変える速度 transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.Trans
Trans(target:DisplayObject, time:Number = 1.0, scaleX:Number = 1.0, scaleY:Number = 1.0, rotation:Number=0.0, basePoint:Point=null, transition:String=null, delay:int=0)
任意の座標を中心に DisplayObject インスタンスを回転、及び拡大縮小させます
target 対象となるオブジェクト time 移動時間 scaleX X軸拡大縮小値 scaleY Y軸拡大縮小値 rotation 回転角度 basePoint 任意の中心点 transition Tweenerに渡すtransitionパラメータ delay 待機時間
croquis.motions.FillColor
FillColor(target:DisplayObject, time:Number = 1.0, colorTransform:ColorTransform = null, transition:String = null, delay:int = 0)
ColorTransform によって DisplayObject インスタンスに着色します
target 対象となるオブジェクト time 移動時間 colorTransform 変更対象となる色情報 transition Tweenerに渡すtransitionパラメータ delay 待機時間
追記：
executeボタンを押したときに前回のコマンドが実行中の場合、前回のコマンドを停止してから実行するようにしました。
上記の一覧のクラスには変更はありません。
前回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。
ってことでした。
それでは、他にどのようなプロパティが定義されているのか調べてみましょう。
キーボードのF1キーを押すとヘルプパネルが立ち上がるかと思います。（少なくとも初期設定の状態であれば）
ヘルプパネルが開いたら上図のプルダウンメニューから「リファレンスガイド（ActionScript & コンポーネント）」を開きます。
選択したらスクロールバーがしばらく、ずりーっとなったあと下図のようになります。
表示されたリストから「ActionScript 2.0 リファレンスガイド」→「ActionScript クラス」を選択します。
FLASH CS3 を利用している場合は以下のような感じです。
ActionScriptに定義されているクラスの一覧がつらつらと表示されるので、
その中から「MovieClip」の項を探して選択します。
開いたページ内には「プロパティ一覧」「イベントの一覧」「メソッド一覧」とテーブルが並んでいます。
このプロパティ一覧に _x や _y のようなプロパティから、透明度やサイズのプロパティの解説が書かれています。
このテーブルから、MovieClipがどのようなプロパティが定義されているのかを調べることができます。
実際にはどんなプロパティがあるのかを調べるより、こういうことをしたいときにはどのようなプロパティやメソッドを用いればいいのか。といった調べ方の方が多いと思いますが、そういうときにも僕はこの一覧の中から探しています。
ちなみに前回用いた onEnterFrame は「イベントの一覧」の中にあります。
さらに特定のプロパティの詳細が知りたいときは、左の一覧から選択するか、CS3の場合はリスト内のプロパティ名の箇所がリンクになっているので、そこから詳細ページに移ることができます。
詳細ページでは簡単なサンプルソースが掲載されていたりもするので、かなり参考になります。
これまで僕も様々なFLASHの参考書を買いあさってきましたが、結局最後まで使うのはヘルプです。
ヘルプを見ればほとんどのスクリプトの説明が載ってます。
これを読んでる方が調べて、解説されていないスクリプトってのはないんじゃないかと思います。
今ではActionScriptについて書かれているブログもかなり増えましたし、
技術者向けのニュースサイトで解説もされているので、インターネットを利用しても簡単に見つけることができると思います。
分からないときは FLASH-JP のようなフォーラムで質問するのも助けになるかと思いますが、
まずは、自分で調べる力を身につけましょう。
おまけ
以下のようなサイトで ActionScript について解説されています。
fumioNonaka.com
URL : http://www.fumiononaka.com/
Flashゲーム講座 & アクションスクリプトサンプル集
URL : http://hakuhin.hp.infoseek.co.jp/main/as.html
IT Pro 「Flash CS3入門 基本からActionScriptまで」
URL : http://itpro.nikkeibp.co.jp/article/COLUMN/20071025/285488/
Flashの枝（FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト）
URL : http://1art.jp/
ActionScript 逆引きクイックリファレンス
URL : http://www.openspc2.org/reibun/QuickReferenceActionScript/index.html
gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」
URL : http://gihyo.jp/dev/serial/01/as3
ここで挙げた以外にも様々なサイトがありますので、いろいろ見てみるのもいいと思います。
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。
ってことでした。
それでは、他にどのようなプロパティが定義されているのか調べてみましょう。
キーボードのF1キーを押すとヘルプパネルが立ち上がるかと思います。（少なくとも初期設定の状態であれば）
ヘルプパネルが開いたら上図のプルダウンメニューから「リファレンスガイド（ActionScript & コンポーネント）」を開きます。
選択したらスクロールバーがしばらく、ずりーっとなったあと下図のようになります。
表示されたリストから「ActionScript 2.0 リファレンスガイド」→「ActionScript クラス」を選択します。
FLASH CS3 を利用している場合は以下のような感じです。
ActionScriptに定義されているクラスの一覧がつらつらと表示されるので、
その中から「MovieClip」の項を探して選択します。
開いたページ内には「プロパティ一覧」「イベントの一覧」「メソッド一覧」とテーブルが並んでいます。
このプロパティ一覧に _x や _y のようなプロパティから、透明度やサイズのプロパティの解説が書かれています。
このテーブルから、MovieClipがどのようなプロパティが定義されているのかを調べることができます。
実際にはどんなプロパティがあるのかを調べるより、こういうことをしたいときにはどのようなプロパティやメソッドを用いればいいのか。といった調べ方の方が多いと思いますが、そういうときにも僕はこの一覧の中から探しています。
ちなみに前回用いた onEnterFrame は「イベントの一覧」の中にあります。
さらに特定のプロパティの詳細が知りたいときは、左の一覧から選択するか、CS3の場合はリスト内のプロパティ名の箇所がリンクになっているので、そこから詳細ページに移ることができます。
詳細ページでは簡単なサンプルソースが掲載されていたりもするので、かなり参考になります。
これまで僕も様々なFLASHの参考書を買いあさってきましたが、結局最後まで使うのはヘルプです。
ヘルプを見ればほとんどのスクリプトの説明が載ってます。
これを読んでる方が調べて、解説されていないスクリプトってのはないんじゃないかと思います。
今ではActionScriptについて書かれているブログもかなり増えましたし、
技術者向けのニュースサイトで解説もされているので、インターネットを利用しても簡単に見つけることができると思います。
分からないときは FLASH-JP のようなフォーラムで質問するのも助けになるかと思いますが、
まずは、自分で調べる力を身につけましょう。
おまけ
以下のようなサイトで ActionScript について解説されています。
fumioNonaka.com
URL : http://www.fumiononaka.com/
Flashゲーム講座 & アクションスクリプトサンプル集
URL : http://hakuhin.hp.infoseek.co.jp/main/as.html
IT Pro 「Flash CS3入門 基本からActionScriptまで」
URL : http://itpro.nikkeibp.co.jp/article/COLUMN/20071025/285488/
Flashの枝（FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト）
URL : http://1art.jp/
ActionScript 逆引きクイックリファレンス
URL : http://www.openspc2.org/reibun/QuickReferenceActionScript/index.html
gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」
URL : http://gihyo.jp/dev/serial/01/as3
ここで挙げた以外にも様々なサイトがありますので、いろいろ見てみるのもいいと思います。
連載とか言いながら、かなり放っておいたら催促されてしまいました。すいません。
今回はムービークリップをActionScriptを使って操作する方法と、簡単なアニメーションについて書こうと思います。
まず新規にflaファイルを作成して、ステージ上に簡単な矩形のムービークリップを作成します。
このインスタンス名は "mc" にしておきます。
さらに同レイヤー上に下記のActionScriptを記述します。
上図の場合 mc は x が 50 の位置に、y が 30 の位置に配置されています。
この状態で、一度プレビューしてみましょう。
出力パネルには「50,30」と出力されたと思います。
何度かステージ上のmcの位置を動かしてみて、その都度プレビューしてみてください。
ほぼ期待通りの数値が出力されるかと思います。
「ほぼ」と書いたのはたまに0.05の誤差が出る場合があるからです。
プロパティパネル上では0.1単位でしか指定できませんが、
実際 FLASH 上では0.05ピクセル単位で描画されてるため
マウスで配置するとこのようなズレの生じる場合があります。
まあ、今はあまり気にしないでください。
次にこれをタイムライン上でトゥイーンアニメーションを作成してみます。
下図のような感じです。
10フレーム目のキーフレームで mc の位置を（x=450,y=30）の位置に移しています。
また、位置を把握しやすいようにガイドを追加したのと、
出力値を表示する用のテキストフィールド（ダイナミックテキスト）を配置しています。
サンプルのflaファイルはこちらからダウンロードできます。
demo2.fla
ActionScriptは以下のように書き換えました。
this はこのタイムラインを指しています。
onEnterFrame は、FLASH上でタイムラインのフレームが
次のフレームに移ったときに呼び出されるMovieClipのイベントハンドラメソッドです。
（メソッドについては第6回を参照してください。）
ここでは onEnterFrame に新たに function を代入することで、onEnterFrameの実行内容を定義しています。
output は画面下に配置したテキストフィールドのインスタンス名です。
output.text でoutputの表示するテキストを取得、変更できます。
output.text に mc._x を代入することでmcのX座標の位置をプレビュー時に表示することができます。
最後に、図の中にはありませんが、プロパティパネル内のフレームレートを 2 まで下げています。
あんまり早いと表示された文字が読み取れないので。
それではプレビューしてみましょう。
当然 mc はカクカクとですが右にスライドしていきます。
この時、画面下のテキストフィールドに表示された値に注目してみてください。
mc が移動すると同時に mc._x の値が変わっているのが分かります。
書き出したデモはこちら
demo2.swf
ここまでくれば説明する必要もないかもしれませんが
mc._x は mc のXの位置を指すMovieClipのプロパティです。
同じく _y は mc のYの位置を指します。
では、このプロパティの値を見るだけではなく、今度はActionScriptを使って変更してみましょう。
トゥイーンアニメーションは使わないので、タイムラインを1フレーム目を残し、2フレーム目以降を削除してしまいます。
また、スクリプトを以下のように1行追加しました。
追加した行では、現在の mc の _x プロパティの値に 10 を足した値を mc._x に代入しなおしています。
このflaファイルはこちら。
demo3.fla
これでプレビューした状態がこちらです。
demo3.swf
mc が10ピクセルずつ右にスライドしています。
さらにスクリプトを以下のように変更してみましょう。
mc._x += 10 は変更前と同様の意味を指します。
つまりmc._x の値に10加算するということです。
さらに _y プロパティにも数値を加算することで、下方向への移動も加わるため、
斜めに移動するようになります。
ただしこのままでは（x=450, y=230）を超えてもそのまま直進し続けてしまいます。
そのため、もう少し改良して以下のようにします。
今回の変更では、もし（if）mc._x の値が 450 未満であり、mc._y の値が 230 未満であるとき、
この両方の条件を満たしているときだけ{}内の命令を実行する。というものです。
さらにここではフレームレートを 30 にしておきましょう。
これをプレビューした状態がこちらです。
demo4.swf
今回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。
今回はムービークリップをActionScriptを使って操作する方法と、簡単なアニメーションについて書こうと思います。
まず新規にflaファイルを作成して、ステージ上に簡単な矩形のムービークリップを作成します。
このインスタンス名は "mc" にしておきます。
さらに同レイヤー上に下記のActionScriptを記述します。
trace( [mc._x, mc._y] );
上図の場合 mc は x が 50 の位置に、y が 30 の位置に配置されています。
この状態で、一度プレビューしてみましょう。
出力パネルには「50,30」と出力されたと思います。
何度かステージ上のmcの位置を動かしてみて、その都度プレビューしてみてください。
ほぼ期待通りの数値が出力されるかと思います。
「ほぼ」と書いたのはたまに0.05の誤差が出る場合があるからです。
プロパティパネル上では0.1単位でしか指定できませんが、
実際 FLASH 上では0.05ピクセル単位で描画されてるため
マウスで配置するとこのようなズレの生じる場合があります。
まあ、今はあまり気にしないでください。
次にこれをタイムライン上でトゥイーンアニメーションを作成してみます。
下図のような感じです。
10フレーム目のキーフレームで mc の位置を（x=450,y=30）の位置に移しています。
また、位置を把握しやすいようにガイドを追加したのと、
出力値を表示する用のテキストフィールド（ダイナミックテキスト）を配置しています。
サンプルのflaファイルはこちらからダウンロードできます。
demo2.fla
ActionScriptは以下のように書き換えました。
this.onEnterFrame = function()
{
output.text = mc._x;
}
this はこのタイムラインを指しています。
onEnterFrame は、FLASH上でタイムラインのフレームが
次のフレームに移ったときに呼び出されるMovieClipのイベントハンドラメソッドです。
（メソッドについては第6回を参照してください。）
ここでは onEnterFrame に新たに function を代入することで、onEnterFrameの実行内容を定義しています。
output は画面下に配置したテキストフィールドのインスタンス名です。
output.text でoutputの表示するテキストを取得、変更できます。
output.text に mc._x を代入することでmcのX座標の位置をプレビュー時に表示することができます。
最後に、図の中にはありませんが、プロパティパネル内のフレームレートを 2 まで下げています。
あんまり早いと表示された文字が読み取れないので。
それではプレビューしてみましょう。
当然 mc はカクカクとですが右にスライドしていきます。
この時、画面下のテキストフィールドに表示された値に注目してみてください。
mc が移動すると同時に mc._x の値が変わっているのが分かります。
書き出したデモはこちら
demo2.swf
ここまでくれば説明する必要もないかもしれませんが
mc._x は mc のXの位置を指すMovieClipのプロパティです。
同じく _y は mc のYの位置を指します。
では、このプロパティの値を見るだけではなく、今度はActionScriptを使って変更してみましょう。
トゥイーンアニメーションは使わないので、タイムラインを1フレーム目を残し、2フレーム目以降を削除してしまいます。
また、スクリプトを以下のように1行追加しました。
this.onEnterFrame = function()
{
mc._x = mc._x + 10;
output.text = mc._x;
}
追加した行では、現在の mc の _x プロパティの値に 10 を足した値を mc._x に代入しなおしています。
このflaファイルはこちら。
demo3.fla
これでプレビューした状態がこちらです。
demo3.swf
mc が10ピクセルずつ右にスライドしています。
さらにスクリプトを以下のように変更してみましょう。
this.onEnterFrame = function()
{
mc._x += 10;
mc._y += 5;
output.text = mc._x;
}
今度は右下に向かって斜めに移動していきます。mc._x += 10 は変更前と同様の意味を指します。
つまりmc._x の値に10加算するということです。
さらに _y プロパティにも数値を加算することで、下方向への移動も加わるため、
斜めに移動するようになります。
ただしこのままでは（x=450, y=230）を超えてもそのまま直進し続けてしまいます。
そのため、もう少し改良して以下のようにします。
this.onEnterFrame = function()
{
if( mc._x < 450 && mc._y < 230 ){
mc._x += 10;
mc._y += 5;
}
output.text = mc._x;
}
if() はその後の{}内の命令に条件を与えるためのものです。今回の変更では、もし（if）mc._x の値が 450 未満であり、mc._y の値が 230 未満であるとき、
この両方の条件を満たしているときだけ{}内の命令を実行する。というものです。
さらにここではフレームレートを 30 にしておきましょう。
これをプレビューした状態がこちらです。
demo4.swf
今回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。
今度はFlickrAPIと、おなじみPapervision3DとでProgressionです。
Prog de Flickr
別にPV3D使ってるからといって、シーンの切り替えとかで
ダイナミックな使い方してるわけではないです。
今回は以下のライブラリを使用しています。
Progression Framework 2.0.18
Papervision3D Beta 1.7 (20.08.07)
as3flickrlib
ソースもアップしてます。
ソースファイル一式ダウンロード
前回以上に書きなぐりのソースになってますが、
特に整理しようとも思わないので、そのままアップしちゃいます。
毎度のことですが、APIキーはご自分で取得したものをお使いください。
あと、アップしてるサンプルですが、どうもアップしたては
アクセスが集中するのか読み込みにエラく時間がかかったりして
ちゃんと使えないかも。
こなれてくるとProgressionがホントに心地良いです。
Prog de Flickr
別にPV3D使ってるからといって、シーンの切り替えとかで
ダイナミックな使い方してるわけではないです。
今回は以下のライブラリを使用しています。
Progression Framework 2.0.18
Papervision3D Beta 1.7 (20.08.07)
as3flickrlib
ソースもアップしてます。
ソースファイル一式ダウンロード
前回以上に書きなぐりのソースになってますが、
特に整理しようとも思わないので、そのままアップしちゃいます。
毎度のことですが、APIキーはご自分で取得したものをお使いください。
あと、アップしてるサンプルですが、どうもアップしたては
アクセスが集中するのか読み込みにエラく時間がかかったりして
ちゃんと使えないかも。
こなれてくるとProgressionがホントに心地良いです。
今回は前回のエントリーでアップしたProgression de Amazonについてです。
シーンの動的生成と削除について書こうとして、削除してなかったのに気づいて一部書き換えました。
変更したのは demo.scenes.DetailScene クラスです。
ファイルをアップしなおそうとして、誤って上書きしちゃいました。
ソースファイル一式をダウンロード
DetailSceneクラスについて
このクラスは画面下部に表示された検索結果の商品一覧をクリックしたときに表示される、
詳細画面を開く際に通過するシーンクラスです。
まあ、何てことはないのですが、通過時に通知されるonDescendイベント内で移動先のシーンIDを取得して
新たにシーンオブジェクトを作成し、それを子シーンに追加しています。
こんな追加処理だけのシーンクラスを作らずに、移動元のシーンクラスのonGotoイベント内で
追加処理を実行してもよさげなものですが、それをするとURLから直接動的シーンに移動することになったときに
シーンが作成されなくなってしまうので、このように中継用のシーンを作成しています。
削除するときはonAscendイベントを使って、先ほど作成したオブジェクトを消すだけです。
なんか書こうと思ったんだけども、まったく特筆するようなことがないんだよなあ。
全部 Progression がやってくれてるし。
なもんで、このサンプルのソース見て「これ何？」って疑問のある人は質問してくれたら答えます。
ってことにしとけばきっと楽なんだ。
そういえばaccessKeyってまだ使ってないなあ。
シーンの動的生成と削除について書こうとして、削除してなかったのに気づいて一部書き換えました。
変更したのは demo.scenes.DetailScene クラスです。
ファイルをアップしなおそうとして、誤って上書きしちゃいました。
ソースファイル一式をダウンロード
DetailSceneクラスについて
このクラスは画面下部に表示された検索結果の商品一覧をクリックしたときに表示される、
詳細画面を開く際に通過するシーンクラスです。
まあ、何てことはないのですが、通過時に通知されるonDescendイベント内で移動先のシーンIDを取得して
新たにシーンオブジェクトを作成し、それを子シーンに追加しています。
こんな追加処理だけのシーンクラスを作らずに、移動元のシーンクラスのonGotoイベント内で
追加処理を実行してもよさげなものですが、それをするとURLから直接動的シーンに移動することになったときに
シーンが作成されなくなってしまうので、このように中継用のシーンを作成しています。
削除するときはonAscendイベントを使って、先ほど作成したオブジェクトを消すだけです。
なんか書こうと思ったんだけども、まったく特筆するようなことがないんだよなあ。
全部 Progression がやってくれてるし。
なもんで、このサンプルのソース見て「これ何？」って疑問のある人は質問してくれたら答えます。
ってことにしとけばきっと楽なんだ。
そういえばaccessKeyってまだ使ってないなあ。
引き続きProgressionの話題です。
現在のProgressionのバージョンは2.0.17です。
先日からやってたデモFlashの"Progression de Amazon"。
とりあえず時間かけ過ぎて飽きてきたので、今日でこのAmazon使ったFlashは終わりにしときます。
まだタブをポチポチ押しまくったり、ブラウザの「戻る」「進む」を繰り返してるとおかしなことになったりと
まだまだ挙動不審ですが、まあ、中には取っ掛かりの手助けになる箇所もあるんじゃないかなあと思います。
Progression de Amazon
ほんとに誰かの役に立つことがあるのか、甚だ疑わしいですが、
当初の予定通り、恥ずかしいソースファイルもアップしておきます。
ソースファイル一式ダウンロード
なお、言うのが遅すぎますが今回はクラスベースでプロジェクトを作りました。
レイアウトは思いっきり直置きなんですけども。。。
一応Progressionファイルも全部入ってるので、index.flaを書き出せば動きますが、
AmazonのAPIキーだけはご自身で取得したものを使用してください。
設定場所はIndexクラスにコメント書いておきました。
Amazon Web サービスのアカウントの取得はこちら
http://www.amazon.co.jp/gp/feature.html/?docId=451209
今回Amazon API についてはこちらを参考にさせていただきました。
MEMO - Amazon API
また、相変わらずクラスファイル内にコメント全然してないです。
詳細について解説しようかと思いましたが、今日は時間も遅いので
また後日書きます。（おそらくそんなに詳しくは書けないと思いますが。）
本音は、誰か僕に綺麗なスクリプトの書き方を教えてほしいんですが。
現在のProgressionのバージョンは2.0.17です。
先日からやってたデモFlashの"Progression de Amazon"。
とりあえず時間かけ過ぎて飽きてきたので、今日でこのAmazon使ったFlashは終わりにしときます。
まだタブをポチポチ押しまくったり、ブラウザの「戻る」「進む」を繰り返してるとおかしなことになったりと
まだまだ挙動不審ですが、まあ、中には取っ掛かりの手助けになる箇所もあるんじゃないかなあと思います。
Progression de Amazon
ほんとに誰かの役に立つことがあるのか、甚だ疑わしいですが、
当初の予定通り、恥ずかしいソースファイルもアップしておきます。
ソースファイル一式ダウンロード
なお、言うのが遅すぎますが今回はクラスベースでプロジェクトを作りました。
レイアウトは思いっきり直置きなんですけども。。。
一応Progressionファイルも全部入ってるので、index.flaを書き出せば動きますが、
AmazonのAPIキーだけはご自身で取得したものを使用してください。
設定場所はIndexクラスにコメント書いておきました。
Amazon Web サービスのアカウントの取得はこちら
http://www.amazon.co.jp/gp/feature.html/?docId=451209
今回Amazon API についてはこちらを参考にさせていただきました。
MEMO - Amazon API
また、相変わらずクラスファイル内にコメント全然してないです。
詳細について解説しようかと思いましたが、今日は時間も遅いので
また後日書きます。（おそらくそんなに詳しくは書けないと思いますが。）
本音は、誰か僕に綺麗なスクリプトの書き方を教えてほしいんですが。
引き続きProgression Frameworkについて。
執筆時現在のバージョンは 2.0.17 です。
前回のデモのpreloader.flaに処理を追加してみました。
デモ（2008.04.03）
とりあえずpreloader.flaとクラスファイルをアップしときます。
preloaderソースファイル
Progressionのクラスは入ってないです。
クラスファイルの中身はこんなのです。
DemoPreloader.as
（余談だけど、hetemlって.asファイルをブラウザで見ることできないのかな？
.htaccessにAddType書いてみてもだめだったんだけども、なんでだろ？）
以下、今回けつまずいた箇所のメモ。
ExPreloaderを継承したDemoPreloaderクラス（以後Preloaderクラス） の onComplete の後、
IndexのonInitが発信されるが、今回complete後にアニメーションを加えた（これはindex.falに入れた
ほうが良いかもしれない）のと、ローディングのバーの伸び方にイージングを加えたので、
それが終わってから Progression のシーンが始まるようにしたかった。
そのため、IndexクラスからPreloaderクラスにイベント通知の登録をしようとして
Preloaderのインスタンスを参照しようとすると、ステージ上のオブジェクトが存在しないと怒られた。
これを回避するためにPreloaderクラス内のオブジェクトの参照をgetterを使って間接的に参照するようにした。
以下はIndexクラスに書いたPreloaderクラスへの参照の部分。
----
onProgressイベント内で、同クラスの bytesLoaded と bytesTotal の両プロパティを参照すればよいのかと思いきや
これらのプロパティは progress.swf 自身のバイト情報なのでロード進行中はすでにどちらも固定の値しか返してなかった。
なので addEventListener で一旦 progressイベントにリスナーを登録して、そこに渡されるイベント情報から
bytesLoaded と bytesTotal を読み取るようにした。
(ここで登録したリスナーにはきちんと内部のExLoaderの情報が返ってきてる。)
----
実際サーバーにアップしてみて気づいたのは、URLが変わって「index.html#/～」とかってなるところでリロードすると
Indexクラスの onInitイベントが飛ばされるみたい。詳細はわからないけども。
そのためローディングの後処理と、メインのコンテンツが同時に実行されてしまった。
これは Progression のルートに設定したシーンクラスの onLoad から Preloader の動作をキャンセルさせることで回避。
以下はルートシーンの onLoad イベント内の処理。
書いてることは Preloader が終了してなければスキップ。
----
これはつまずいた訳ではないけども、ちょっと気になったのでボソっと。
toString がオーバーライドされてるからPreloaderクラスをtraceすると [object DocumentRoot] に。
DocumentRoot クラスから toString を消すと [object ExMovieClip] に。
コンマ数秒だけ「あれ？」って思った。w
なんか自分の失敗ばかりツラツラ書くと、Progression使うの難しく見えるかもしれないなあ。
でも、本当は気にするところが、上にあげた部分だけで、その他に気にすることが無いってところが良くできてるんだと思う。
だってプリローダーファイルを外部で用意して、コンテンツ部分と分離させようとか考えてイチから作ったらかなりの手間だと思う。
コンテンツ部分の制作時に親ファイルの存在を気にする必要もなく出来てる訳だし。
Progression使わずにローディングの部分だけでも使えるし。
あと、AS2やってた人がAS3の取っ掛かりにProgressionを使うのもいいと思う。
なかなか使いこなすまでには至らないけども、噛めば噛むほど味の出る感じがいいです、Progression。
きっとjp.niumパッケージの中身とかも便利クラスがいっぱい詰まってるんだろうと思いますが、
まだそこまで手が回りません。
執筆時現在のバージョンは 2.0.17 です。
前回のデモのpreloader.flaに処理を追加してみました。
デモ（2008.04.03）
とりあえずpreloader.flaとクラスファイルをアップしときます。
preloaderソースファイル
Progressionのクラスは入ってないです。
クラスファイルの中身はこんなのです。
DemoPreloader.as
（余談だけど、hetemlって.asファイルをブラウザで見ることできないのかな？
.htaccessにAddType書いてみてもだめだったんだけども、なんでだろ？）
以下、今回けつまずいた箇所のメモ。
ExPreloaderを継承したDemoPreloaderクラス（以後Preloaderクラス） の onComplete の後、
IndexのonInitが発信されるが、今回complete後にアニメーションを加えた（これはindex.falに入れた
ほうが良いかもしれない）のと、ローディングのバーの伸び方にイージングを加えたので、
それが終わってから Progression のシーンが始まるようにしたかった。
そのため、IndexクラスからPreloaderクラスにイベント通知の登録をしようとして
Preloaderのインスタンスを参照しようとすると、ステージ上のオブジェクトが存在しないと怒られた。
これを回避するためにPreloaderクラス内のオブジェクトの参照をgetterを使って間接的に参照するようにした。
以下はIndexクラスに書いたPreloaderクラスへの参照の部分。
override protected function _onInit():void
{
//～中略
if( DemoPreloader.instance ){
DemoPreloader.instance.addEventListener( Event.CLOSE , startContents );
} else {
startContents();
}
}
private function startContents( event:Event=null ):void
{
// 最初のシーンへ移動。
prog.goto( prog.firstSceneId );
}
----
onProgressイベント内で、同クラスの bytesLoaded と bytesTotal の両プロパティを参照すればよいのかと思いきや
これらのプロパティは progress.swf 自身のバイト情報なのでロード進行中はすでにどちらも固定の値しか返してなかった。
なので addEventListener で一旦 progressイベントにリスナーを登録して、そこに渡されるイベント情報から
bytesLoaded と bytesTotal を読み取るようにした。
(ここで登録したリスナーにはきちんと内部のExLoaderの情報が返ってきてる。)
----
実際サーバーにアップしてみて気づいたのは、URLが変わって「index.html#/～」とかってなるところでリロードすると
Indexクラスの onInitイベントが飛ばされるみたい。詳細はわからないけども。
そのためローディングの後処理と、メインのコンテンツが同時に実行されてしまった。
これは Progression のルートに設定したシーンクラスの onLoad から Preloader の動作をキャンセルさせることで回避。
以下はルートシーンの onLoad イベント内の処理。
書いてることは Preloader が終了してなければスキップ。
override protected function _onLoad():void
{
if (DemoPreloader.status != "close") DemoPreloader.status = "skip";
addCommand(
new AddChild( progression.container , _cast )
);
}
----
これはつまずいた訳ではないけども、ちょっと気になったのでボソっと。
toString がオーバーライドされてるからPreloaderクラスをtraceすると [object DocumentRoot] に。
DocumentRoot クラスから toString を消すと [object ExMovieClip] に。
コンマ数秒だけ「あれ？」って思った。w
なんか自分の失敗ばかりツラツラ書くと、Progression使うの難しく見えるかもしれないなあ。
でも、本当は気にするところが、上にあげた部分だけで、その他に気にすることが無いってところが良くできてるんだと思う。
だってプリローダーファイルを外部で用意して、コンテンツ部分と分離させようとか考えてイチから作ったらかなりの手間だと思う。
コンテンツ部分の制作時に親ファイルの存在を気にする必要もなく出来てる訳だし。
Progression使わずにローディングの部分だけでも使えるし。
あと、AS2やってた人がAS3の取っ掛かりにProgressionを使うのもいいと思う。
なかなか使いこなすまでには至らないけども、噛めば噛むほど味の出る感じがいいです、Progression。
きっとjp.niumパッケージの中身とかも便利クラスがいっぱい詰まってるんだろうと思いますが、
まだそこまで手が回りません。
とりあえず何か作ってみないことには良し悪しも何もわからないので
とにかくざっくり作ってみた。
なんかせっかくリンクまでしてもらったのに、あのサンプルじゃ申し訳ないし。
Progression デモ(2008.03.31)
まだ画面遷移とか何もしてないので、もうちょっとチョメチョメしてからソースのほうもアップします。
で、以下、今のところの雑感など。
Progressionは大きくは「シーン」と「キャスト」の2つから構成されてるんだと思うのだけども、
シーンクラスに何を書いて、キャストクラスに何を書くかってのが悩む。
これは自分の未熟さのせいなんだけども。
ところでキャストからシーンを参照する方法が分からなかった。
そもそもそんな作り方をするのが間違いなのかもしれない。
このAmazonのやつは、すでにシーンとキャストがごちゃごちゃ。
シーンがキャストを制御するんだから、やっぱりキャストからシーンを参照するようなことは
しちゃいけなかったかもしれない。
あと、コマンドクラスをいかにウマく使うかってのもミソだと思うんだけども
これがまた不慣れなせいで、すっ飛ばして自分で関数作って実装しちゃったりする。
折角コマンドが用意されてるのにaddEventListener使いまくりだったり。
あとaddCommandで追加したコマンドの実行の仕方がわからなかったり。
結局SerialListを新たに作ってexecuteで実行とか。
きっと何か用意されてると思うんだけども。
Flash作るとき、自分はステージ上にボコボコレイアウトしていって
それをスクリプトで制御するんだけども、はじめからステージ上にオブジェクトを
配置していると、"onCastAdded"が使えなかった気がするな（気のせいかな？）。
なんか不確かなんだけども。
ExPreloaderからIndexへの遷移ももうちょっと調べてみないと。
ローディング後の後処理みたいなのを作った場合、その後処理後から
Indexへの連携の仕方が分からなかった。
ああ、帰らなきゃ。
とにかくざっくり作ってみた。
なんかせっかくリンクまでしてもらったのに、あのサンプルじゃ申し訳ないし。
Progression デモ(2008.03.31)
まだ画面遷移とか何もしてないので、もうちょっとチョメチョメしてからソースのほうもアップします。
で、以下、今のところの雑感など。
Progressionは大きくは「シーン」と「キャスト」の2つから構成されてるんだと思うのだけども、
シーンクラスに何を書いて、キャストクラスに何を書くかってのが悩む。
これは自分の未熟さのせいなんだけども。
ところでキャストからシーンを参照する方法が分からなかった。
そもそもそんな作り方をするのが間違いなのかもしれない。
このAmazonのやつは、すでにシーンとキャストがごちゃごちゃ。
シーンがキャストを制御するんだから、やっぱりキャストからシーンを参照するようなことは
しちゃいけなかったかもしれない。
あと、コマンドクラスをいかにウマく使うかってのもミソだと思うんだけども
これがまた不慣れなせいで、すっ飛ばして自分で関数作って実装しちゃったりする。
折角コマンドが用意されてるのにaddEventListener使いまくりだったり。
あとaddCommandで追加したコマンドの実行の仕方がわからなかったり。
結局SerialListを新たに作ってexecuteで実行とか。
きっと何か用意されてると思うんだけども。
Flash作るとき、自分はステージ上にボコボコレイアウトしていって
それをスクリプトで制御するんだけども、はじめからステージ上にオブジェクトを
配置していると、"onCastAdded"が使えなかった気がするな（気のせいかな？）。
なんか不確かなんだけども。
ExPreloaderからIndexへの遷移ももうちょっと調べてみないと。
ローディング後の後処理みたいなのを作った場合、その後処理後から
Indexへの連携の仕方が分からなかった。
ああ、帰らなきゃ。
