Internet Watch Logo
Logo
What is Flash?!
Get Shockwave Flash

~第四回:ボタンの仕組みを知ろう! ブタ饅の中身の巻

 ふらっしゅ君、君の作ったブタ饅の具はどんなふうになっているのかね? お客様に食べていただかなくとも知ってもらう方法を考えてみたまえ!

1 図1 前回のファイルを開こう
 sample.flaがお手元にない場合は、こちらから前回のデータをダウンロードして下さい。餃子がお皿に配置されていますね? 例のごとく、この餃子と食器を削除します。選択して[Delete]キーで消去できます。
2 図2 ブタ饅を複製しよう
 [ウインドウ]-[ライブラリ](Windows:Ctrl+L/Macintosh:Command+L)でライブラリを開きます。「1manju」を選択し、[シンボルポップアップ]ボタンから[複製]を選択します。名前を「2manju」とし、[ボタンビヘイビア]にチェックを入れます。こうして、ボタン属性を持ったブタ饅が複製され、編集画面に移ることができます。
ワンポイント……ボタンの仕組みを知ろう
 Flashで作成するインタラクティブボタンとは、4枚の画像から成り立っています。ユーザーからの働きかけにより反応するのです。
インタラクティブボタン

[アップ]キャンバスウインドウ上に置かれている状態
[オーバー]マウスカーソルが触れた状態
[ダウン]クリックした状態
[ヒット]ボタンの反応領域

3 図3 フレームの挿入
 では、ボタンを作ってみましょう。タイムラインの[ヒット]にカーソルを合わせ、クリックし、[フレームポップアップ]を開きましょう。[フレームを挿入]を選択して、[ヒット]までフレームを挿入します。
4 図4 キーフレームの挿入
 タイムライン上の[オーバー]から[ヒット]までをクリックした状態でドラッグし、選択状態にしましょう。[フレームポップアップ]を開き、[キーフレームを挿入]を選択します。こうすることで、[ヒット]フレームまでキーフレームが挿入され、[アップ]と同じドローイングが複製されます。
5 図5 オーバーのグラフィックの加工
 [オーバー]はカーソルが触れた状態を示します。マウスが触れて、ブタ饅が大きくなるようにしてみましょう。カレントフレームを指し示している三角形ポインタを[カレントフレームポインタ]と呼びます。この[カレントフレームポインタ][オーバー]に移動すると、ドローイングが選択状態になっているはずです。選択状態のまま、[拡大/縮小]ツールで一回り大きくしましょう。
6 図6 ダウンのグラフィックの加工
 [ダウン]はクリックした状態です。クリックするとブタ饅が割れて中身が見えるようにしてみましょう。[カレントフレームポインタ][ダウン]に移します。余白をクリックして、選択を解除します(この作業を「クリックアウト」と呼びます)。[ペンツール]を選択し、太さ4.0、ペンモード[ライン]、黒を選びます。ブタ饅を分断するようにラインを描きましょう。
7 図7 ダウンのグラフィックの加工2
 右側の塗り色をダブルクリックします。こうすることで、クリックされたドローイングに隣接するドローイングがすべて選択されます。
8 図8 ダウンのグラフィックの加工3
 選択された部分を[回転]ツールで角度を付け、移動させます。
9 図9 ダウンのグラフィックの加工4
 割れたブタ饅に厚みを付け、[ブラシツール]で具を書き足します。ブラシモード[標準]もしくは[塗りをペイント]にしておきましょう。
10 図10 ダウンのグラフィックの加工5
 [インクボトル]でもう片方のブタ饅のラインのない部分をクリックし、ラインを付けます。
11 図11 ダウンのグラフィックの加工6
 不要な線を選択してDelete、角度を整えて、[ダウン]のできあがりです。
12 図12 ヒットの加工
 [ヒット]の大きさはそのままにしておきましょう。データの負荷を減らすために、1色で塗りつぶし、ラインを消去。これでボタンの加工は完了しました。タブの一番上の矢印を押すと、シンボル編集画面を抜けることができます。
13 図13 動作を確認しよう
 キャンバスウインドウに、さきほど作ったばかりの「2Manju」をライブラリのプレビューウインドウからドラッグします。[制御]-[ボタンアクション]をチェックしましょう。実際にクリックしてみてください。具を確認できる、ボタンアクションの付いたブタ饅ができあがりました。

Download完成品のダウンロードZIP形式(Windows)/StuffIt形式(Macintosh)(4KB)

次回予告!
蓋つきセイロを作ろう
(都合により変更になる可能性もありますが、あらかじめご了承ください。)


目次へ

Copyright(C), 1995-1998 Impress Corporation.
internet-watch-info@impress.co.jp