数多くの、サイズの小さなインスタンス(ここではビーズのような粒)の集合体として、文字を描くというスクリプトのお勉強である。 小さなインスタンスとしては、球状物や、星、木の葉などいろいろなものを作成しようとするムービーに応じて選択できるし、出来上がる形状物としても、文字だけでなく、いろいろな形状の描画をシンボルに変換したものが使用可能である。
本SAMPLE作成の手法としては、以下のステップを用いた。
(1)テキスト文字をシェイプに分解し、ムービークリップに変換する。
(2)ビーズを文字が描かれている矩形領域にランダムに配置する。
(3)hitTestで文字のシェイプ部分にhitしているものはそのまま、それ以外はもう一度矩形領域にランダムにばらまく。
(4)(3)を繰り返し、すべてを文字シェイプにhitさせ、hitしたものは、そのhitした時の座標を記憶させる(targetx,targety)。
(5)それぞれのビーズインスタンスを、初めにばらまいた時の座標から、hitした座標まで遅延効果付きで移動させる。
SAMPLE1、SAMPLE2、SAMPLE3 はこちらにあります。 |
SAMPLE4 |
|
ステージなどの準備 |
SAMPLE4
●600*280、24fpsのステージを設定。 ステージ下部に、スタートボタン(s_btn)、リセットボタン(r_btn)を配置。
●「挿入」ー「新規シンボル(ムービークリップ)」画面で、座標(0,0)にテキストツールで「ようこそ」と記述し(もちろん表示したい文字で良い)、全体を選択して ctrl+B キーを1回押して一文字ずつに分解し、それぞれにつきシンボル(ムービークリップ)に変換する。シンボルに変換する前に、各文字につきctrl+B キーをもう1回押してシェイプに変換しておく。
ここでは、HG丸ゴシックM-PRO、90ポイントのフォントを用いたが、好みのものでよい。色は何色でも良い(スクリプトでalphaを0にする)
シンボル名、リンケージ識別子をそれぞれ、c1,c2,c3,c4 とした。
●「挿入」ー「新規シンボル(ムービークリップ)」画面で、中心が(0,0)となるように、直径4px程度の円を描く。 サイズはスクリプトで設定するので適当でよく、色は好みのものにする(ここでは、ランダムに着色するので何色でも良い)。
シンボル名、リンケージ識別子を dot_mc とした。
|
スクリプト (as2.0) |
SAMPLE4
//ビーズのサイズ
var dotSize = 4;
//文字毎のビーズの数
var dotNum = 200;
//文字数
var chNum = 4;
//各文字ムービークリップのsize
var charWidth = 80;
var charHeight = 90;
//表示間隔(ミリ秒)
var interval = 600;
//文字列表示位置(1字目左上)
var x0 = 250;
var y0 = 100;
//ビーズが飛び始める点
var startx = 50;
var starty = 400;
//文字インスタンス
for (i=1; i<=chNum; i++) {
var char = this.attachMovie("c"+i, "ch"+i, i);
char._x = x0+charWidth*(i-1);
char._y = y0;
char._alpha = 0;
}
//START ボタンリリースで
s_btn.onRelease = function():Void {
s_btn.enabled = false;
s_btnclick = true;
r_btnclick = false;
k = 1;
id = setInterval(initialset, interval);
};
//RESET ボタンリリースで
r_btn.onRelease = function():Void {
s_btn.enabled = true;
r_btn.enabled = false;
r_btnclick = true;
s_btnclick = false;
init();
};
//初期配置
init();
function init():Void {
k = 1;
for (j=1; j<=chNum; j++) {
initialset();
}
}
//ビーズの初期配置関数
function initialset():Void {
j = k++;
for (i=1; i<dotNum; i++) {
var d = j*dotNum+i;
mc = attachMovie("dot_mc", "dot"+d, d);
mc._width = mc._height = dotSize;
mc.target_mc = _root["ch"+j];
mc._x = mc.x0 = startx;
mc._y = mc.y0 = starty;
var color = new Color(mc);
color.setRGB(Math.floor(Math.random()*256*256*256));
mc.finished = false;
mc.num = j;
target(mc);
}
}
//移動先の文字を含む矩形領域を設定する関数
function target(mc):Void {
mc.targetx = mc.target_mc._x+charWidth*Math.random();
mc.targety = mc.target_mc._y+charHeight*Math.random();
arrangeMc(mc);
}
//移動先の文字領域を設定する関数
function arrangeMc(mc):Void {
if (mc.finished == false) {
mc.onEnterFrame = function() {
if (s_btnclick) {
this._visible = false;
this._x = this.targetx;
this._y = this.targety;
if (!this.target_mc.hitTest(this._x, this._y, true)) {
target(this);
} else {
this._visible = true;
this._x = this.x0;
this._y = this.y0;
this.atnow = getTimer();
this.finished = true;
delete this.onEnterFrame;
this.onEnterFrame = toTarget;
}
} else {
this.onEnterFrame = toTarget;
}
};
}
}
//文字領域に移動する関数
function toTarget():Void {
if ((getTimer() - this.atnow) > 2 * this.num) {
this._x += (this.targetx - this._x) / 7;
a = this.targetx - (this.targety - starty) / this.targetx / 0.012*(0.5+this.num);
this._y = 0.012/(0.5+this.num)* this._x * (this._x - a) + starty;
}
btn.enabled = true;
if (Math.abs(this._x-this.targetx)<3) {
this._x = this.targetx;
this._y = this.targety;
delete this.onEnterFrame;
if (this.num == chNum) {
clearInterval(id);
}
}
r_btn.enabled = true;
} |
スクリプトの若干の説明 |
a = this.targetx - (this.targety - starty) / this.targetx / 0.012*(0.5+this.num);
下に示した2次曲線の定数 a を計算している
this._y = 0.012/(0.5+this.num)* this._x * (this._x - a) + starty;
(startx,starty)と(mc.targetx,mc.targety)を通る、上に突の2次曲線
0.012、0.5などの定数は、丁度見栄えがいいように、try & error で決めたもの。文字数やサイズを変えた場合、
調整が必要と思われる。 その他は、SAMPLE2を参照のこと。
|
|
|
HOME お勉強総リスト |