先日の外部から画像を呼び出す勉強をしている中で、面白いサンプルを見つけたので今日はこれを少し勉強してみようと思いましたが、難しすぎてすべて理解できませんでした。
もう少し勉強（特に数学、記号からどのような動きなのかわかるようになってから）してから再度挑戦をしてみたいです。
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にすると通常の倍の時間をかけるので、見た目的にはスローモーションで実行されている状態になる。
