Flash/ActionScript

ランダム関数でおみくじを作成!

ランダムな整数を出力し、おみくじを作成します。Math.random()、Math.floor()の二つの関数をマスターし、今年の運勢を占ってみましょう。

執筆者:渡辺 大介

お正月ぼけもようやく抜け、仕事に勉強に頑張っている時期でしょうか?今回はみなさんの今年の運勢を占う「おみくじ」をFlashで作成します。
ランダムに結果が変わるおみくじを作成します。
(.flaファイルはページの最後でダウンロードできます)

ボタンシンボルの中にムービークリップを配置する

ダウンロードしたファイルを確認
1. おみくじの.flaファイルをここからダウンロードしてください。ダウンロードしたファイルを確認します。1フレーム目におみくじのグラフィックシンボル「おみくじ」が配置されています。

結果画面を編集する
2. 2~5フレーム目はおみくじの運勢のイラストが配置されています。内容は皆さんのアイデアで面白い物に書き換えると更に面白くなります。

ボタンを作成
3. 1フレーム目に戻り、「おみくじ」のインスタンスを選択し、右クリックからシンボルに変換を行います。タイプをボタン、名前を「おみくじボタン」と設定してください。

オーバーフレームを編集
4.作成した「おみくじボタン」をダブルクリックして内部を編集します。アップフレームにあるキーフレームを、右クリック「フレームのコピー」を行います。オーバーフレームを右クリックし「フレームのペースト」を行ってください。

ヒットフレームを編集
5.先程と同様にヒットフレームを右クリックし「フレームのペースト」を行ってください。図のようにオーバーフレームとヒットフレームにキーフレームが作成されていれば大丈夫です。

ムービークリップを作成
6.オーバーフレームに移動し、ステージ配置されている「おみくじ」のグラフィックシンボルを選択してください。右クリックしシンボルに変換を選択します。タイプをムービークリップ、名前を「おみくじアニメ」と設定してください。

キーフレームを作成
7.作成した「おみくじアニメ」のムービークリップをダブルクリックし内部を編集します。2、3、4フレームにキーフレームを作成してください。

自由変形ツールで傾ける
8.2フレーム目に移動してください。配置されている「おみくじ」のグラフィックシンボルを選択し自由変形ツールで図のように時計回りに傾けてください。

自由変形ツールで傾ける
9.4フレーム目に移動してください。同様に配置されている「おみくじ」のグラフィックシンボルを選択し、今度は反時計回りに傾けてください。

これでボタンにマウスが乗ったときおみくじが振られるアニメーションが作成できました。おみくじの下準備はこれで完了です。

次のページではActionScriptを使用して、おみくじを引く機能を作成します。
  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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