ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 セルフタイマー(setInterval setTimeout)

 シャッターをクリックしてみてください。5秒後にフラッシュが光ります。

 

 ParaDrawの本領を発揮!
 という感じの絵にしてみました(全て絵ですよ↑)。
 ParaDraw Ver.0.3a4 で描いた絵を,Suzuka Ver.0.7.4.1[リッチエディット版] で動作させています。

 ParaDraw を始め ドロー(ベクタ)系画像ソフトは,上ような硬質・無機質的な絵が楽に描けるところが良いですね。
 さらに描いた絵は拡大縮小に強く,なおかつファイル容量が軽いというのが魅力です。

 このページは,お絵描き講座のページではないので描き方は説明しません。
 もし描き方がわからなくて,描き方を知りたい方は PDRファイル を分解してみてください。
 このサイトの他のサンプルも,当然遠慮なくどんどん分解してくださってかまいません。

 また,作り替えて(画像を変形や変造して)どこかで使用や公開されてもかまいませんよ。
 とくにこのサイトで度々登場する「ボタン」は,少し手を入れると色々なサイトで "素材" としても使えるように描いているつもりです。

 ただし,
 このサイトにあるものは ささきち が作成したもので,ささきち以外の誰かが作成したものではありません。
 したがって,
 「そのままの絵」や「そのままのFlash」などを 「自分が作った物(自分で描いた物)です。」 というような形や表現で公開するのはやめてください。
 もし使用される場合は,
 「自分の作品の中で生かす」 という形にしてください。そういった使い方で使用される場合は,無断変造,無断公開 OK です。
 と言いましても,
 このページのカメラを素材として使うことは普通考えられないことですけどね...。

 

 

 話の本題は,絵ではなく setInterval() 関数 と setTimeout() 関数 です。
 サンプルでは,まずフレーム1のアクションレイヤーに,

 stop();

 を書いてムービーを停止させています。
 そしてボタンには次のように書いています。

on (release) {
	// 複数回クリックされた場合の対処
	clearInterval(myID);
	// setInterval をセット
	myID = setInterval(function () {
		// このボタンの階層のタイムラインを再生開始
		play();
		// setIntervalをクリア
		clearInterval(myID);
	// 5000ミリ秒(5秒)間隔で実行
	}, 5000);
}

 最初はフレーム1でストップさせて,フレーム2 以降に 「フラッシュが光る」というアニメーションを作成しています。
 つまり,シャッターをクリックした5秒後に,ムービーの再生が開始されるというだけのしくみです。

 setInterval() 関数は,一定の間隔で関数やメソッド,またはオブジェクトを呼び出す関数です。
 「スクリプトの実行をちょっと待つ」とか「一定時間毎に繰り返してスクリプトを実行する」というときに使われます。
 ActionScript ではなく,他言語での sleep関数 のような目的で使うこともできます(ニュアンスが少し違いますけどね)。
 シンタックス基本型は次のようになっています。

 setInterval(関数名or匿名関数, 実行間隔[ミリ秒], [パラメータ(省略可)]);

 setInterval() 関数の使用が終了するときには,clearInterval() を使用してこの関数を削除する必要があります。
 そのときには,そのsetInterval 固有の ID番号 が必要になるため,次のような構文で使用するのが一般的です。

<ID名> = setInterval(function () {
	<ステートメント>;
	(clearInterval(<ID名>);)
}, <実行間隔[ミリ秒]>);

//---↓例↓---

myID = setInterval(function () {
	trace("Flash");
	// 1回だけ実行する場合はここでクリアする↓
	clearInterval(myID);
}, 1000);

 または,

function 関数名(){
	<ステートメント>;
	(clearInterval(<ID名>);)
}
<ID名> = setInterval(関数名, 実行間隔[ミリ秒]);

//---↓例↓---

function myFunc() {
	trace("Flash");
	// 1回だけ実行する場合はここでクリアする↓
	clearInterval(myID);
}
myID = setInterval(myFunc, 1000);

 一応 <ID名> と書いていますが,IDには実際は番号が割り振られます。

 このサンプルでは,初めに書いたスクリプトの通り, function を定義しない上の例の形をしたスクリプトを書いています。
 下の例の形のようなスクリプトにしてもかまいません。
 その場合は次のようになります。

on (release) {
	// 複数回クリックされた場合の対処
	clearInterval(myID);
	// ユーザ定義関数 myFunc の定義
	function myFunc() {
		// このボタンの階層のタイムラインを再生開始
		play();
		// setIntervalをクリア
		clearInterval(myID);
	}
	// setInterval をセット
	myID = setInterval(myFunc, 5000);
}

 

 

 setInterval() 関数は,一定の間隔で関数やメソッド,またはオブジェクトを呼び出しますが,
 一定時間を置いて一度きり関数やメソッド,またはオブジェクトを呼び出す,setTimeout() 関数 というものもあります。

 これは,Flash Player 8 以降で一応使用可能な関数なのですが,SWF6 の設定で SWF を生成しても,閲覧する Player が 8 以上であれば動作します。
 ActionScriptでは,setTimeout はマイナーな関数ですが,JavaScript では,結構使われることが多いように思います。
 setTimeout() 関数 の,シンタックス基本型は次のようになっています。

 setTimeout (関数名or匿名関数, 遅延時間[ミリ秒], [パラメータ(省略可)])

 setInterval とほとんど同じです。
 指定時間後1回だけ,関数or匿名関数 を実行するので,指定した時間は "実行間隔" ではなく "遅延時間" になっていることぐらいが違いです。

 次のような構文で使用できます。

setTimeout(function () {
	<ステートメント>;
}, <遅延時間[ミリ秒]>);

//---↓例↓---

setTimeout(function () {
	trace("ActionScript");
}, 1000);

 

function 関数名(){
	<ステートメント>;
}
setTimeout(関数名, 遅延時間[ミリ秒]);

//---↓例↓---

function myFunc() {
	trace("ActionScript");
}
setTimeout(myFunc, 1000);

 上のサンプルのボタンのスクリプトを setTimeout() 関数を使用して書くと次のようになります。

on (release) {
	// 複数回クリックされた場合の対処
	clearTimeout(myID);
	// setTimeoutをセット
	myID = setTimeout(function () {
		// このボタンの階層のタイムラインを再生開始
		play();
	// 5000ミリ秒(5秒)遅延して実行
	}, 5000);
}

 

 setInterval に関しましては,ヘッダーメニュー でも使用しています。

 setInterval と setTimeout について説明しましたが,5秒待つことに無理してこれらの ActionScript を使う必要は全くありません。
 Suzukaは元からタイムラインを持っていますから,5秒間動何もかないフレームを作成しても良いわけです。

 上のサンプルはフレームレートが 15fps です。
 したがって,ボタンクリックで単純に play() させて, 15×5+1=76 ほどのフレームから「フラッシュが光る」アニメーションを作成してもかまいません。
 setInterval や setTimeout は,スクリプトで 「待つ」 ということをする場合のただ単なる1つの方法例です。

 

 

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso311.zip」 18.1 KB (18,579 バイト)