「Flash ActionScriptスーパーサンプル集 1.0/2.0対応版」サポートページ

--　早わかり ActionScript2.0　--
　00-1　プロパティの値をスクリプトで設定する
　00-2　ムービークリップのインスタンスはMovieClipクラスから作られる
　00-3　クラスの使い方とクラスの構造
　00-4　カスタムクラスを作る

--　ActionScript スーパーサンプル集　--
01　ループ再生とフレーム移動
　01-1　ループするアニメーション
　01-2　指定のラベルへ移動する
　01-3　フレーム移動を行うクラス
　01-4　フレームラベルを配列で管理するクラス
02　再生と停止
　02-1　playボタンとstopボタン
　02-2　play/stopのトグルボタン
　02-3　クリックで再生／停止するムービークリップ
　02-4　クリックで再生／停止するMovieClipクラス拡張
　02-5　複数のムービークリップの再生と停止
　02-6　再生をしばらく待つ
03　ロールオーバー
　03-1　ロールオーバーでヒント表示
　03-2　ロールオーバーで再生と逆再生
　03-3　ロールオーバーでビヨヨンとサイズが揺れる
　03-4　ロールオーバーしたインスタンスを「」で囲む
04　カーソルの座標
　04-1　ステージ基準のカーソル座標
　04-2　ムービークリップ基準のカーソル座標
05　反対側から出てくる
　05-1　水平に文字を流す
　05-2　マウスと反対方向へ動く
　05-3　雪のように降る
06　衝突と跳ね返り
　06-1　壁で跳ね返る
　06-2　壁で跳ね返るクラス
　06-3　落下とバウンド
　06-4　領域内では進行方向を変えて進む
07　ドラッグ
　07-1　ドラッグの領域の制限する
　07-2　展開／折り畳みボタン付きドラッグバー
　07-3　ドラッグして投げる
　07-4　ジョグダイアル
08　回転させる
　08-1　振り子のように揺れる回転
　08-2　フレームレートに左右されない回転
　08-3　クリックしている位置を中心に回転する
　08-4　ドラッグして振り回す
09　インスタンスの配置
　09-1　ムービークリップを減衰するサインカーブに配置する
　09-2　ムービークリップを渦巻き状に配置する
　09-3　ムービークリップを傾いた楕円に配置する
　09-4　インスタンスの位置をレイアウトに従って順送りする
10　マスクを使ったアニメーション
　10-1　レンズで拡大表示する
　10-2　スクラッチカードをこする
11　ビットマップとフィルタ
　11-1　花の絵筆マウス
　11-2　写真イメージを重ねて貼る
12　写真とswfの読み込み
　12-1　ドラッグ＆ドロップで読み込む
　12-2　写真の読み込みとクラスの継承
13　立体物の回転
　13-1　ボタンで立体物の向きを変える
　13-2　ドラッグで立体物の向きを変える
14　3D的な表現
　14-1　表裏回転するコイン
　14-2　反転するクリップに写真を読み込む
15　３次元座標変換
　15-1　３次元空間で回転するボール
　15-2　ステージに置いたインスタンスを３Ｄ回転させる
　15-3　3次元空間に風景を作る

ムービーを再生すると「FLASH」の文字が順に1文字ずつ大きくなり元のサイズに戻るというムービークリップのアニメーションを繰り返し再生します。文字が大きくなるのに合わせて透明になります。サイズとアルファの設定値を変更するアニメーションはタイムラインのトゥイーンモーションで作ってあります。

フォルダの[ギア１個]、[ギア2個]、[ギア3個]のタブをクリックすると、クリックしたタブのフォルダの中身が表示されます。各フォルダにはコンテンツとして回転する歯車のムービークリップが置いてあります。

ムービークリップのフレームを進めたり戻したりするカスタムクラスを作ります。[>]ボタンをクリックするとムービークリップのフレームが１つ進み、[<]ボタンをクリックすると１つ手前のフレームに戻ります。[>|]ボタンは最後のフレーム、[|<]ボタンは先頭のフレームに移動します。[!]ボタンはランダムなフレームに移動します。サンプルのムービークリップには各フレームに１枚の写真が貼ってあるので、写真を１枚ずつ表示するムービーになります。写真を最後までめくると[>]ボタンで最初の写真に戻ります。

ソースファイル→ダウンロード

ムービークリップのタイムラインに複数のフレームラベルが設定してあるとき、次のフレームラベルへ移動、手前のフレームラベルへ移動、最後のフレームラベルへ移動というように、フレームラベルを相対的な位置関係でナビゲーションできるカスタムクラスを作ります。ムービークリップに設定されているフレームラベルを調べる関数はないので、配列を使ってフレームラベルを管理します。このサンプルのabcムービークリップには、a→A、b→Bのようにabcdeの小文字のアルファベットが大文字に変化する5つのアニメーションが入っていて、[>]ボタンをクリックすると次の文字のアニメーションへ、[<]ボタンをクリックすると手前の文字のアニメーションへと移ります。[>|]ボタンは最後のアニメーション、[|<]ボタンは先頭のアニメーションに移動します。

「FLASH」の文字のアニメーションがループ再生しているムービークリップがあります。stopボタンをクリックするとアニメーションが止まり、playボタンをクリックするとアニメーションが再開します。

ソースファイル→ダウンロード

「FLASH」の文字のアニメーションがループ再生しているムービークリップがあります。stopボタンをクリックするとアニメーションが止まり、playボタンをクリックするとアニメーションが再開します。playボタンとstopボタンは互いに入れ替わるトグルボタンになっています。

歯車のムービークリップをクリックすると、クリックされた歯車が回転をはじめます。回転している歯車をクリックすると回転を停止します。変数の値で条件分岐を行って停止と再開の処理を振り分けます。

歯車のムービークリップをクリックすると、クリックされた歯車が回転をはじめます。回転している歯車をクリックすると回転を停止します。変数の値で条件分岐を行って停止と再開の処理を振り分けます。動作的には02-3で作ったムービークリップと同じですが、スクリプトの実装の方法が違います。ここではMovieClipクラスを拡張したクラスをムービークリップシンボルに割り当てて使う方法を紹介します。

２機のUFOのライト、５つの星、「UFO」の文字が点滅しています。これらはufo_mcという1つのムービークリップの中に入っているムービークリップです。STOPボタンをクリックするとすべてが止まり、playボタンをクリックするとアニメーションが再開します。複数のムービークリップを中に含んでいるムービークリップのアニメーションを止めるには、含まれているムービークリップを個々に止めなければなりません。

ムービーを再生すると「FLASH」の文字のアニメーションがループ再生されます。アニメーションの再生開始は毎回数秒間の待ち時間を置いて繰り返されます。待ち時間の指定を省略すると5秒以内の乱数の待ち時間になります。待ち時間はsetIntervalで作るタイマーで計測しています。

マウスカーソルがロールオーバーしたムービークリップのインスタンスの横にインスタンスを説明する吹き出し（ヒント）が表示されます。ロールオーバーしていないときはヒントは隠れます。ロールオーバーしたインスタンスの領域の座標からヒントの表示位置を決めています。

ソースファイル→ダウンロード

四角形にロールオーバーするとピストンのようにバーが伸びて文字が現れます。マウスカーソルがロールアウトするとバーが引っ込んで元に戻ります。バーが引っ込むアニメーションは、フレームの再生を逆再生しています。

ムービークリップにロールオーバーすると、バネが振動するようにビヨヨンと揺れてサイズが拡大します。ロールアウトすると振動して元のサイズに戻ります。クリックでもムービークリップはビヨヨンと振動します。これらの動きはリンケージしたBiyoyonクラスでアニメーションしています。

ロールオーバーしているムービークリップのインスタンスの四隅を「」で囲みます。インスタンスにロールオーバーしていないときはマウスカーソルを囲みます。「」は指定の座標に徐々に近づきます。

カーソルの位置をクロスラインで追従し、XY座標をリアルタイムで表示します。表示する座標の基準点はステージ左上角のグローバル座標です。

ソースファイル→ダウンロード

ムービークリップの領域内にカーソルが入っている時、カーソルのローカル座標を表示します。座標軸上のドットはカーソルのXY座標の位置に移動します。インスタンスの上ではカーソルは十字のカスタムカーソルになります。

ムービーを再生すると「ACTIONSCRIPT test」が左方向へ、「0123456789」が右方向へと流れます。文字がステージから外へ消えると反対側から出てきます。透明度と「0123456789」の数字はランダムに変化します。

空の中心を基準として、マウスカーソルの動きの逆の方向へUFOが動きます。UFOが動く速度はマウスカーソルが中心から離れるほど速くなります。マウスカーソルが空の中心よりも右にあるとUFOは左へ動き、中心より左にあれば右へ動きます。雲はUFOとは逆にマウスカーソルと同じ方向へ動きます。つまり、利用者がマウスカーソルで示す方向へ移動している感じになります。遠近感が出るようにUFOと雲は手前にあるものほど大きく速く移動します。

最初ムービーには雪のインスタンスは１つもなく、[start]ボタンをクリックするとシンボルからインスタンスが作られて降り始めます。[stop]ボタンをクリックすると作った雪のインスタンスが消去されます。雪はステージの下まで落ちるとステージの上の座標に戻り、再び降るというループを繰り返します。空間の奥行きが感じられるように手前の雪ほど形が大きく速く落ちます。

ソースファイル→ダウンロード

3つのボールが四角形の中で動き回り、壁に当たって跳ね返ります。壁にぶつかると衝突音が鳴ります。3つのボールの進む方向と速度はランダムに再生開始時にランダムに決めます。衝突音はサウンドオブジェクトを使って鳴らします。

壁に当たって跳ね返るボールをムービークリップで作ります。ボールをクリックしても進行方向を反転できます。壁で跳ね返るスクリプトと衝突音を鳴らすスクリプトをカスタムクラスで定義し、シンボルにクラスをリンケージする方法でアニメーションを実行します。また、このムービークリップでは２つのカスタムクラス定義ファイルを使うので、クラス定義ファイルをフォルダの中に入れて使う方法も紹介します。

ボールをドラッグして放すとその位置から落下し、斜面に当たってバウンドを繰り返します。バウンドするたびに跳ね返る高さが低くなり、最後は斜面で静止します。斜面の切れた何もない場所に落とした場合にはステージの底でバウンドします。ボールは回りながら落ちますが、この回転もスクリプトで行っています。ボールが跳ねる位置は、MovieClipクラスのhitTest()を使ってボールと斜面が衝突する座標を調べています。

カプセルの形のムービークリップが動き回ります。通常は直進していますが、水たまりのような形のイメージの上に乗ると進行方向を回転します。水たまりの中を走っている間は進む度に向きを変更するので、ぐるりと円を描くように進むことになります。水たまりを抜けるとそのまま直進を続け、ステージの外に出るとスピードを再設定して反対側から現れます。進む向きとムービークリップの棒の向きが合うように、進行方向が変化するのに合わせてムービークリップの向きも回転しています。

ソースファイル→ダウンロード

ムービークリップをマウスでドラッグできます。ドラッグしている最中のムービークリップは半透明になり、ドラッグが終了すると重なりが最前面になります。ドラッグできる範囲は指定した枠の中だけで、枠の外へドラッグすることはできません。ムービークリップの縦横サイズが変形していてもドラッグできる範囲が正しく対応するように計算します。

ソースファイル→ダウンロード

ドラッグバーつかんでムービークリップをドラッグできます。ドラッグできる範囲は指定した枠の中だけで、枠の外へドラッグすることはできません。ドラッグしている最中のムービークリップは半透明になり、ドラッグが終了すると重なりが最前面になります。写真をクリックしても最前面になります。

インスタンスをドラッグして投げることができます。インスタンスは投げられた速度で飛んで惰性で進んだあと徐々に止まります。ステージの壁に当たると跳ね返ります。Pointクラスを使って点の計算を行っています。このサンプルではThrowMeクラスをムービークリップシンボルにリンケージするので、ライブラリからインスタンスを作るだけでドラッグして投げることができるようになります。

ジョグダイヤルをマウスでドラッグして回転できます。何回転させたか、回転の総角度は何度になるかをリアルタイムに表示します。時計回りに２回転させたら720度、反時計回りに2回転ならば-720度のように連続した回転した角度を表示します。

メトロノームのようにバトンが左右に振れる運動を繰り返します。スタートの角度、左右の振れ幅の角度、振れる速度を指定できます。回転は等速ではなく、振り子のように端に近づくにつれて減速して止まり、そこから逆回転で徐々に加速します。メトロノームのように左右に振れるだけでなく、360度以上の振れ幅を指定すれば好きな回数だけグルグル回すことができます。

ソースファイル→ダウンロード

ムービークリップが不定期に回転の方向や回転速度が変更します。フレーム毎に回転を進めるのではなく、setIntervalで作られたタイマーが定期的にメソッドを呼び出すことで回転します。これにより、なめらかな回転をしていたかと思うとコツコツコツと秒を刻むような回転をするいうようにフレームレートに左右されない回転をします。

ムービークリップをクリックすると、クリックした位置を中心にしてムービークリップが回転します。回転させたままドラッグすることもできます。

ムービークリップをドラッグして回すと、クリックした位置を中心にムービークリップを振り回すことができます。速くドラッグすると速く回り、ゆっくり回すとゆっくり回転します。

何もないステージにムービークリップのインスタンスが作られ、サインカーブが減衰する曲線に並びます。インスタンスのサイズも拡大から縮小へと徐々に小さくなっていきます。

ソースファイル→ダウンロード

何もないステージにムービークリップのインスタンスが作られ渦巻き状に並びます。インスタンスのサイズは中心から外へと徐々に大きくなっていきます。

何もないステージにムービークリップのインスタンスが作られ楕円に並びます。楕円はXY軸が斜めに傾いた形になっていますが、インスタンスの向きが傾いていない点に注目してください。

何もないステージにインスタンスを作り指定の座標に配置します。中央の大きなボールの右にあるボールをクリックすると大きくなって中央に移動し、それに合わせてほかのボールが場所を順に移動します。中央の左のボールをクリックすると左のボールが中央に移動し、ぼかのボールはさっきとは逆方向に順に移動します。

イメージを虫眼鏡のレンズで見るように拡大してみることができます。マウスを動かせば虫眼鏡が動き、拡大表示する場所を移動できます。拡大していない場所はピントがぼけて表示されます。これはマスクを使って拡大イメージを表示するテクニックです。

スクラッチカードのように？マークの円の中をマウスでこすると隠れていたイラストが出てきます。?マークはときどき回転方向と速度を変えて回転します。空のムービークリップをマスクとして設定し、そこにマスクイメージを描き加えていくことで隠れていた絵を表示させるというテクニックです。startボタンをクリックするとスクラッチカードの内容が変わります。

ステージをクリックすると花がスタンプされます。絵を描くようにマウスでステージをなぞると花の絵筆のように花が次々と描かれます。花を回転させたり拡大縮小させることで単調にならないようにしています。花のムービークリップのインスタンスを貼り付けていくのではなく、BitmapDataクラスを使ってインスタンスの絵をビットマップデータに描き加えていきます。ビットマップイメージをマウス座標に描き込むための移動やイメージの回転、拡大縮小といった変形はMatrixクラスの変形マトリックスを使います。

ソースファイル→ダウンロード

ライブラリに登録しておいた写真イメージをラインダムに貼った１枚のビットマップイメージを作って表示します。ドロップシャドウフィルタを使って1枚ずつの写真イメージに影を付けています。

サムネイルを中央にドラッグ＆ドロップすると写真イメージが読み込まれます。サムネイルの画像も中央に表示する画像も外部ファイルから読み込んでいます。サムネイルは同一サイズにリサイズしていますが、中央の画像はそのままのサイズでセンター揃えで表示しています。この同じスクリプトを使ってswfムービーを読み込むこともできます。

何もないステージにインスタンスを作り写真を読み込みます。インスタンスは指定の位置に並び、中央の両脇の写真をクリックするとクリックした写真が中央に移動して大きくなります。インスタンスの配置や順送りの動作などは「09-4　インスタンスの位置をレイアウトに従って順送りする」で使ったクラスをそのまま使い、写真を読み込む機能と写真サイズに合わせてインスタンスのサイズを調整する機能をクラス拡張する方法で追加しています。

QTVRのように猫の置き時計を回転させます。ボタンをクリックすると指定の向きになるまでターンします。たとえば、一番左のボタンをクリックすると正面の向きになるように時計がその場でくるりとターンします。回転は最初が速く、止まる際に減速します。回転はフレームの再生、逆再生を利用して行っています。

QTVRのようにドラッグで時計を回転させます。時計をドラッグした方向にドラッグしたぶんだけ時計がぐるりと回転します。カーソルは手カーソルになり、マウスボタンを押すと握った手のカーソルになります。

コインがくるくる回転するアニメーションです。回転に合わせてコインの裏と表が入れ替わります。ムービークリップの伸縮を利用して、表と裏の２枚のイメージだけで回転しているように見せています。

くるくる回転して落ちる六角形のムービークリップに写真を読み込んで表示します。六角形のインスタンスは上から下へ流れた後に再び上に戻りますが、その時に新しい写真を読み込み直しています。写真は何枚でもよく、ステージに表示する分だけ順に読み込んで表示します。ステージに何行何列で写真を並べるかは引数で自由に設定できます。回転のアニメーション、インスタンスのアタッチ、写真の読み込み、写真を六角形にマスクするといったすべてをスクリプトで行います。

ソースファイル→ダウンロード

３次元空間の立方体の頂点に配置された８個のボールが、マウスの動きに合わせて３Ｄ回転します。ボールのインスタンスはムービークリップシンボルをアタッチして作ります。回転に合わせてボールの位置と大きさが変わるだけでなく、ボールの重なりとアルファ値も変化しています。

ソースファイル→ダウンロード

ステージに並べた天使と星のインスタンスがマウスの動きに合わせて3D回転します。回転に合わせてインスタンスの位置と大きさが変わり、重なりも入れ替わります。3D空間への配置を意識せずにインスタンスをステージの好きな位置に手で並べることができて簡単です。

３次元空間にペーパークラフトのような風景を作り、ウォークスルーします。家や木には厚みがありませんが、空間には奥行きがあり、遠くに家が建っていて前には木が植えてあります。手前にはガードレールのある道路があって車が動いています。ガードレール脇には木も植えてあります。マウスでステージ中央より上を押すと風景の中へ奥へと進み、中央より下を押すと風景の中を手前に下がってきます。中央より右を押すと右に進み、左を押すと左に進みます。キーボードの矢印キーでは目線の高さを変えることができます。