カテゴリー : トゥイーン

2/24　wonderfl気になるサンプルを勉強したメモ(Ginny Effect)

先日の外部から画像を呼び出す勉強をしている中で、面白いサンプルを見つけたので今日はこれを少し勉強してみようと思いましたが、難しすぎてすべて理解できませんでした。
もう少し勉強（特に数学、記号からどのような動きなのかわかるようになってから）してから再度挑戦をしてみたいです。

Ginny Effect

画面の設定と画像の呼び出し

1
2
3
4
5
6
7
8
9
10
11
12
13
public function Main():void {

stage.quality = StageQuality.MEDIUM; //　①Flashの画質を設定しています。
graphics.beginFill(0x0);
graphics.drawRect(0, 0, 465, 465);
//　②画面上に文字を挿入。(import com.bit101.components.*;)
new Label(this, 360, 440, "PLEASE CLICK STAGE")

var context:LoaderContext = new LoaderContext(true); //③異なるドメインから画像を呼び出す
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, compHandler);
loader.load(new URLRequest(IMAGE_URL), context);
}

①Flashの画質を設定。詳しくはこちら。
②ステージ上に文字を表現。new Label(場所、文字のX軸、文字のY軸、”表示する文字”);
③異なるドメインの画像をアクセスする際にポリシーファイルを読み込む必要があります。
•　Security.loadPolicyFile()を使い直接（crossdomain.xml)読み込む方法
•　checkPolicyFile()を使いロードごとにクロスドメインを読み込む方法とあります。今回は後者の例を使っています。
詳しくはこのサイトを参考下さい。

実際の処理の流れ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function compHandler(e:Event):void {
sprite = new Sprite();
addChild(sprite);
vertexs = []
for (var xx:int = 0; xx < SEGMENT; xx++) {
vertexs[xx] = [];
for (var yy:int = 0; yy < SEGMENT; yy++) {
vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
}
}
draw();
addEventListener(Event.ENTER_FRAME, draw);
stage.addEventListener(MouseEvent.CLICK, clickHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
}

vertexs[xx][yy]
具体的に vertexs[1][1] = (50,40)
vertexs[1][2] = (50,80)
vertexs[1][3] = (50,120)

vertexs[2][1] = (100,40)
vertexs[2][2] = (100,80)
vertexs[2][3] = (100,120)

実際の画像の動き(BetweenAS3)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
private function clickHandler(e:MouseEvent):void {
var tweens:Array = [];
var xx:int, yy:int, delay:Number;
var px:Number = SEGMENT * (mouseX / IMG_W);
var py:Number = SEGMENT * (mouseY / IMG_H);
//　画像が表示されている時の処理
if (!isHide) {
for (xx = 0; xx < SEGMENT; xx++) {
for (yy = 0; yy < SEGMENT; yy++) {
vertexs[xx][yy] = new Point(xx * IMG_W / SEGMENT, yy * IMG_H/SEGMENT);
// 画像のは位置している地点により、マウスの押した位置に収束する時間を変えている。
delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py)) / 40;

tweens.push(
BetweenAS3.delay(
BetweenAS3.tween(vertexs[xx][yy], {
x : px * IMG_W / SEGMENT,
y : py * IMG_H / SEGMENT
}
,null
,delay
,Cubic.easeIn),
delay / 2)
)
}
}
//　画像が表示されていない時の処理
}else {
// 重み付けが怪しい・・・
var max:Number = 0;
for (xx = 0; xx < SEGMENT; xx++) {
for (yy = 0; yy < SEGMENT; yy++) {
vertexs[xx][yy] = new Point(px * IMG_W / SEGMENT, py * IMG_H / SEGMENT);
delay = Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))
max = Math.max(max, delay);
}
}
for (xx = 0; xx < SEGMENT; xx++) {
for (yy = 0; yy < SEGMENT; yy++) {
delay = (max - Math.sqrt((xx - px) * (xx - px) + (yy - py) * (yy - py))) / 40;
tweens.push(
BetweenAS3.delay(
BetweenAS3.tween(vertexs[xx][yy], {
x : xx * IMG_W / SEGMENT,
y : yy * IMG_H / SEGMENT
},null, delay + 0.05, Quad.easeOut),
delay / 2
)
)
}
}
}
// 指定された配列内のトゥイーンを結合して、同時に実行するトゥイーンを作成します.
var itw:ITween = BetweenAS3.parallelTweens(tweens);
if (isShift) itw = BetweenAS3.scale(itw, 5);
itw.play();

isHide = !isHide;
}

delay = Math.sqrt((xx – px) * (xx – px) + (yy – py) * (yy – py)) / 10;
画像のは位置している地点により、マウスの押した位置に収束する時間を変えている。

BetweenAS3の処理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
//配列の中にBetweenAS3を放り込んでいる。
tweens.push(
BetweenAS3.delay(
BetweenAS3.tween(vertexs[xx][yy], {
x : xx * IMG_W / SEGMENT,
y : yy * IMG_H / SEGMENT
},
null,
delay + 0.05,
Quad.easeOut),
delay / 2
)
)

BetweenAS3.delay
BetweenAS3.delay（BetweenAS3.tween(mc, {x: 100}), 1.0);
BetweenAS3.tween(mc, {x: 100})の処理を１秒遅らしている。

BetweenAS3.parallelTweens(tweens);
指定された配列内のトゥイーンを結合して、同時に実行するトゥイーンを作成します.
BetweenAS3.scale(itw, 5);
指定されたトゥイーンをタイムスケールしたトゥイーンを作成します.
デフォルト値は1。これが通常のタイムスケールとみなされる。値を2にするとトゥイーンエンジンが早送りモードとなり、全てのトゥイーンは通常の半分の早さで完了する。値を0.5にすると通常の倍の時間をかけるので、見た目的にはスローモーションで実行されている状態になる。

2010
02/24
CATEGORY
Flash
トゥイーン
コメントを書く

1/21 BetweenAS3 and Camera メモ　

BwtweenAS3

wonderflで「ＢｅｔweenAS3」を検索したら、すごく興味を引かれるモノがあったのでさっそくForkをしていろいろいじって見ました。
なんか映画マトリックスのように時間を速度を変えて表現しています。かっこいい。

clockmakerさんのサイトに詳しい解説が載っています。

疑問点について
BetweenAS3ではないんですが、cameraについてあまりよくわかってないのでpapervision3Dについて。

ソースコードの一番下にある　super.onRenderTick(event); はシーンをレンダリングをしています。

viewport.opaqueBackgroundはviewportの背景を設定できる。

camera3D:視点位置はx,y,zプロパティで、視点方向はtargetとなるオブジェクトを指定することでそのオブジェクトが存在する場所となる。指定しなければ常に原点方向。

camera.focusがどのように見えるかがわかりにくいので、Google先生で調べたらこことここが出てきました。
focusは「目からカメラのある面までの距離」だそうです。

2010
01/21
CATEGORY
トゥイーン
コメントを書く

1/20 BetweenAS3 メモ　5

BetweenAS3

ここまで回数を重ねて行くとぼんやりとBetweenAS3がどのようなものかわかってきた気がします。
基本はwonderflのサイトで例を色々いじくって、調べて、またいじくっての繰り返しをしているだけなんですが、実際に色々数値を変えて試してみると変化を感じやすい。他のプログラミング言語と違いActionScriptはすぐに結果が表示されるので飽きずにできているのだと思います。

色を変えてみよう

BetweenAS3で色を変えるには少し複雑ですが transformを使って行います。

BetweenAS3.tween(object, transform: { colorTransform: { redOffset:255,greenOffset:255,blueOffset:0}, null,2.0,Cubic.easeInOut).play();

transformにはcolorTransform以外にもsoundTransformがあります。

Tween Controlling

_t.stopOnComplete = false;は繰り返しを指示しています。
_t.play(); 再生

2010
01/20
CATEGORY
トゥイーン
コメントを書く

1/20 BetweenAS3 メモ 4

BetweenAS3 Special Properties

BetweenAS3を使って、Filterを変更することが可能です。
Filterの種類も数多くありますので、この機会に調べてみることにしました。

まずは基本パラメーター
blurX：水平方向のぼかし量
blurY：垂直方向のぼかし量
quality：ぼかしの回数

代表的な種類（参考サイト）

  • _blurFilter　　オブジェクトのぼかしを表現
  • _bevelFilter オブジェクトの形状を表現
  • _dropShadowFilter　オブジェクトの分身（オフセット）を作る？
  • _glowFilter　影のぼかしを表現、影自体も含む

    • _bevelFilterを色々変えることができれば、フォトショップのように立体感のあるオブジェクトを表現できると思います。

    2010
    01/20
    CATEGORY
    トゥイーン
    コメントを書く

    1/20 BetweenAS3 メモ 3

    BetweenAS3 Physical（物理トゥイーン）

    BetweenＡＳ３は通常Tweenを使っている例が多かったのですが、Physical（物理）を使えばより複雑なトゥイーンを創ることができます。

    • パッケージをインポートする。org.libspark.betweenas3.easing.Physical easing.
    • BetweenAS3.physical(………….) で利用する。

    Physicalには３つのeasingが装備可能。参考サイト

    * uniform

    同じ速度で対象物を動かします。
    通常のtween場合は移動する距離が違っても、終着点に着く時間が同じです。
    uniformは速度を一定にするので、距離によっては終着点につく時間が変わってきます。

    * accelerate

    初速度、加速度を指定できる。Physical.accelerate(初速度、加速度）,

    * exponential

    指数関数。

    いろいろサイトを調べましたが exponential　がイマイチよくわかりませんでした。
    数値を上げれば、スピードが上がる。遅いと終着点に近づくと減速します。
    これはもう少し調べないといけません。

    2010
    01/20
    CATEGORY
    トゥイーン
    コメントを書く

    twitter

    あわせて読みたい

    あわせて読みたい

    amazon.co.jp

    google