| 前回Matrixを使った画像切り替えを勉強したが、今回のお勉強は、BlurFilterの使い方である。 全く同様のことを「フィルター機能を使ったモーション」の「ぼかしの応用」で勉強したが、今回はActionScriptで実現することにする。 |
| ぼかしの程度(量)を変化させるスクリプト |
「挿入」「新規シンボル」で画像(ここではBachの写真)を基準点を中心にして配置、シンボル名、リンケージ名を設定する。
ここでは、シンボル名、リンケージ名:sp1
| |
|
|
|
import flash.filters.BlurFilter;
this.createEmptyMovieClip("screen",100);
screen._x = 75;
screen._y = 105;
speed = 0.04*Math.PI;
mc = screen.attachMovie("sp1", "sp1", 1);
rd = Math.PI/2;
mc.onEnterFrame = function() {
rd += speed;
v = 50*Math.sin(rd);
blurChange(v);
};
function blurChange(v) {
mc._alpha = 100*(1-v/60);
var myBlur:BlurFilter = new BlurFilter(v, v, 1);
mc.filters = [myBlur];
} |
BlurFilterクラスのインポート
空のムービークリップscreenの作成、配置
速度係数
表示画像のムービークリップ
角度の初期値
rdをフレーム毎にspeedだけ増加させる
ぼかし量vをサイン関数で変化させる
(vは50〜-50の間で変化し、+のときにvに応じてボケ、- の間はクリヤー画像になる)
アルファー値に変化をつける
BlurFilterの定義、適用 |
|
| 連続ぼかし量変化で画像(イメージ)の切り替え |
|
●150*200、背景色黒、12fpsのステージを用意
●画面上部に作曲家名を表示させるためのダイナミックテキストボックスを配置、インスタンス名をnameBoxとする。
FONT、色、サイズなどは好みで決める
●上記同様、10枚の写真をライブラリーに格納、リンケージ名をsp1,,,,sp10とする。ここでは、102*130の写真10枚。 |
|
import flash.filters.BlurFilter;
pic_num = 10;
var composer:Array = new Array("Bach", "Handel", "Beethoven",
"Mozart", "Brahms", "Chopin", "Schumann",
"Tchaicovsky", "Mendelssohn", "Shostakovich");
this.createEmptyMovieClip("screen",100);
screen._x = 75;
screen._y = 105;
speed = 0.04*Math.PI;
n = 1;
mc = screen.attachMovie("sp"+n, "sp"+n, 1);
rd = Math.PI/2;
screen.onEnterFrame = function() {
mc = screen.attachMovie("sp"+n, "sp"+n, 1);
composerNameBox.nameBox.text = "";
rd += speed;
v = 50*Math.sin(rd);
blurChange(v);
if (rd>=2.5*Math.PI) {
if (n<pic_num) {
n++;
} else {
n = 1;
}
rd = Math.PI/2;
}
mc.onRollOver = function() {
rd += (Math.PI-rd)/5;
composerNameBox.nameBox.text = composer[n-1];
};
};
function blurChange(v) {
mc._alpha = 100*(1-v/60);
var myBlur:BlurFilter = new BlurFilter(v, v, 1);
mc.filters = [myBlur];
} |
|
| スクリプトの説明 |
|
●if (rd>=2.5*Math.PI) { if (n<pic_num) { n++; } else { n = 1; } rd = Math.PI/2; }
もし積算変化量(ラジアン)が、2.5*πになったら、rdをπ/2に戻し、nに1を加える(写真番号を次へ)
● rd += (Math.PI-rd)/5
(ロールオーバー時に、)rdをπとなるように減速変化させる(写真がクリヤーになる)
●nameBox.text = composer[n-1];
ダイナミックテキストボックスに該当する作曲家の名前を表示させる
注)rdが0→π/2→π→3/2π→2πと増えるにしたがって、そのsin値は 0→1→0→-1→0と振幅し、これに応じてv値が振幅する。ぼけ状態はvのプラス値に比例し、マイナス値には反応しないので、マイナスの間はクリヤーになり、プラス側の場合は、rdが1/2π、5/2π、、、でボケが最大になる。最大になった時に、画像を入れ替える。 |
| 外部画像ファイルを読み込み、ぼかしで切換えるタイプのスライドショー |
SAMPLEはこちらにあります。
ステージ:690*530、12fps、写真の大きさ:640*480(ここではimgフォルダに格納) |
| スクリプト |
import flash.filters.BlurFilter;
pic_num = 17;
mc = this.createEmptyMovieClip("mc", 100);
var mcLoader:MovieClipLoader = new MovieClipLoader();
var oListener:Object = new Object();
oListener.onLoadComplete = function() {
loaded = true;
};
mcLoader.addListener(oListener);
mcLoader.loadClip("img/y1.jpg",mc);
mc._x = mc._y=25;
speed = 0.04*Math.PI;
n = 1;
rd = Math.PI/2;
onEnterFrame = function () {
rd += speed;
v = 50*Math.sin(rd);
if (loaded) {
blurChange(v);
}
if (rd>=2.5*Math.PI) {
loaded = false;
if (n<pic_num) {
n++;
} else {
n = 1;
}
rd = Math.PI/2;
mcLoader.loadClip("img/y"+n+".jpg",mc);
}
};
function blurChange(v) {
mc._alpha = 100*(1-v/60);
var myBlur:BlurFilter = new BlurFilter(v, v, 1);
mc.filters = [myBlur];
} |
|
|
| |
| HOME お勉強総リスト |