Flash/ActionScript

Flash万華鏡にチャレンジ!(3ページ目)

Actionscriptによる描画を応用して万華鏡を作成します。「描画して」「複製して」「マスクかけて」「回す」だけの簡単な作業で美しい万華鏡が出来ます。

執筆者:渡辺 大介

万華鏡作成ボタンを配置する

万華鏡作成ボタンを配置
1. 新規レイヤー「navigation」を作成してください。そこに「万華鏡作成」ボタンを用意します。「ボタントラック」で図のように「万華鏡作成」と記載しておけば分かりやすいでしょう。
このままだと、このFlashが一体何なのか?よく分かりませんので…補足として「画面を4回クリックして四角形を描いてください。」という注意書きを加えると尚丁寧ですね。

2. 作成した「万華鏡作成」ボタンに以下のActionscriptを記述してください。
on(release){
_root.play();
}
説明はいりませんね。これでタイムラインを進めて、万華鏡を表示するフレームへと移動します。

2フレーム目に空のキーフレームを挿入
3. レイヤー「navigation」の2フレーム目に空白のキーフレームを挿入してください。

扇型のマスクを用意する

扇型のマスクを作成
1. 新規レイヤー「mask」を作成し、2フレーム目にキーフレームを作成します。2フレーム目に図のように円を6等分した扇型の図形を用意します。塗りがあれば色は何でも大丈夫です。最初に円を描き、それをステージ中心に配置し、次に鋭角の部分は60度なので直線を二つ用意して60度ずらし、図のような形に切り取るという手順が簡単でしょうか。

2. 描いた図形をムービークリップに変換し「mask」と名前をつけてください。このとき鋭角の部分が「X座標0,Y座標0」の基準点に来るように指定してください。インスタンス名を「mask0」とつけてください。

Flashで四角形を描画
3. インスタンス「mask0」を複製し60度ずらします。これを5回繰り返し図のように円の形が復元してください。時計回りにインスタンス名を「mask1」、「mask2」…「mask5」と変更します。同じインスタンス名のものが出来ないように注意してください。


次のページではここまで準備した万華鏡にActionscriptを記述して完成させます。
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます