インスタンスのロールオーバーで、サイズ、色がランダムに設定された星が飛び散る効果を作ってみた。 作成方法は、星をあらかじめ碁盤目に配置ておいて、マウスとの距離が一定サイズ以下になったらランダムに計算された距離と角度で移動する方法をとった。
メニューやナビゲーション用に使えたらと思うが、何かほかの有効な使い方を見出して頂けたら幸いである。
本サンプルは、パフォーマンスの低いパソコン（例えばPentium4クラス搭載PC）では、十分な動きは得られないので、星の数を減らす（粗くする）などの対処が必要である。 |
| SAMPLE |
|
|
| ステージなどの準備 |
●500*500のステージ（24fps）を設定（背景色、ここでは黒）
●ステージに100*100の白色縁付円形のインスタンスを5個（en1,en2,,,en5、中の塗り部分は異なるに色に着色）、5角形の頂点に配置する（数、位置は任意）
●円形のインスタンス（en1,,,)それぞれの編集画面で、縁取りの線、中の塗り部分を別々にシンボル化し、それぞれのインスタンス名を、ring、in_mcとする。 これらのインスタンス名は、全ての en インスタンスで同名でよい。
●多角形ツールで15*15の星を描き、シンボルに変換し、識別子を star とし、ステージからは削除しておく。
|
スクリプト （as2.0） |
var num:Number = 900; //starの数
var col:Number = 28; //starの列数
var r:Number = 50; //mouse位置からの距離
//starの色を配列定義
var myColor:Array = new Array("0xff0000","0x00ccff","0xffff00","0xff00ff","0x00ff00");
//グローフィルターの設定
import flash.filters.GlowFilter;
var glow:GlowFilter = new GlowFilter(0xffffff, 0.8, 10, 10, 8, 10, false);
//starを碁盤目状に配置、飛び先座標をランダム定義、大きさをランダム定義
for (var i:Number=0; i<num; i++) {
var mc = this.attachMovie("star", "star"+i, i);
mc._x = mc.x0 = 8+18*(i%col);
mc._y = mc.y0 = 8+18*Math.floor(i/col);
mc.apartx = r+100*Math.random();
mc.aparty = r+100*Math.random();
mc._xscale = mc._yscale=50+100*Math.random();
mc.onEnterFrame = starFly;
}
//starをロールオーバーに応じて飛散させる関数
function starFly() {
if (event_No) {
//star(mc)の色を設定
mcColor = new Color(this);
mcColor.setRGB(myColor[event_No-1]);
//starとmouse位置との距離
this.mcLength = Math.sqrt(Math.pow(this.x0-_xmouse, 2)+Math.pow(this.y0-_ymouse, 2));
//starとmouseを結ぶ直線が水平となす角度
this.rd = Math.atan2((this._y-_ymouse), (this._x-_xmouse));
//mouse位置から距離r以内のstarは飛ばし先に回転、移動、その他のstarを見えなくする
if (this.mcLength<r) {
this._visible = true;
this.targetx = _xmouse+this.apartx*Math.cos(this.rd);
this.targety = _ymouse+this.aparty*Math.sin(this.rd);
this._x += (this.targetx-this._x)/3;
this._y += (this.targety-this._y)/3;
this._rotation += 120;
} else {
this._visible = false;
this._x += (this.x0-this._x)/3;
this._y += (this.y0-this._y)/3;
this._rotation += 0;
}
} else {
this._visible = false;
}
}
//円形インスタンスのロールオーバー・アウト効果
for(i=1; i<=6; i++) {
var event_mc = this["en"+i];
event_mc.No = i;
event_mc.onRollOver = function() {
event_No = this.No;
this.in_mc._alpha = 0;
this.ring.filters = [glow];
}
event_mc.onRollOut = function() {
event_No = 0;
this.in_mc._alpha = 100;
this.ring.filters = null;
}
}
|
| 基本となるスクリプト |
| （１）starをmouse位置を中心とする円周上に並べる |
|
（２）starをmouse位置を中心とした放射線上に飛ばす |
|
|
|
|
|
（２）のケースのスクリプトを以下に示す。 （１）の場合は、
mc.apartx = r+100*Math.random();
mc.aparty = r+100*Math.random();
の部分が、
mc.apartx = r;
mc.aparty = r;
となる。
|
var num:Number = 290; //starの数
var col:Number = 17; //starの列数
var r:Number = 50; //mouse位置からの距離
//starを碁盤目状に配置、starの飛ばし先座標をランダムに定義
for (var i:Number=0; i<num; i++) {
var mc:MovieClip = this.attachMovie("star", "star"+i, i);
mc._x = mc.x0=8+18*(i%col);
mc._y = mc.y0=8+18*Math.floor(i/col);
mc.apartx = r+100*Math.random();
mc.aparty = r+100*Math.random();
mc.onEnterFrame = starFly;
}
//starを飛ばし先めがけて移動させる意関数
function starFly() {
//starとmouse位置との距離
this.mcLength = Math.sqrt(Math.pow(this.x0-_xmouse, 2)+Math.pow(this.y0-_ymouse, 2));
//starとmouseを結ぶ直線が水平となす角度
this.rd = Math.atan2((this._y-_ymouse), (this._x-_xmouse));
//mouse位置から距離r以内のstarは飛ばし先に移動
if (this.mcLength<r) {
this.targetx = _xmouse+this.apartx*Math.cos(this.rd);
this.targety = _ymouse+this.aparty*Math.sin(this.rd);
this._x += (this.targetx-this._x)/3;
this._y += (this.targety-this._y)/3;
this._rotation += 120;
//距離r以上離れているstarは元の位置に移動
} else {
this._x += (this.x0-this._x)/3;
this._y += (this.y0-this._y)/3;
this._rotation += 0;
}
}
|
|
| |
| HOME お勉強総リスト |
