Flash Professional CC 2015 基本講座

ボタンシンボルをつくる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボタンシンポルを使うとインタラクティブに動くボタンがつくれます。
講師:
07:28

字幕

このレッスンでは ボタンシンボルを使ったボタンの作り方についてご紹介します。まず、ボタンにしたい絵を描かないといけませんので今回は簡単に矩形ツールでボタンを作ることにしましょう。塗りは少し、少しだけですけれども色を付けて放射状のグラデーションでボタンを作ります。ブルーです。では、これをボタンシンボルにします。シンボルにするときはシンボルにしたいものをまず選択しなければいけません。アウトラインも含めて選択しますのでダブルクリックですね。そして右クリックでシンボルに変換します。選ぶのは種類はボタン真ん中ですね。で、名前は文字通りbutton にしましょう。基準点は真ん中で良いでしょう。OK ボタンをクリックします。これでボタンシンボルが出来上がりました。何が出来上がったかということなんですが確認はムービープレビューで見てみます。制御メニューのムービープレビューでFlash Professional を使用します。マウスポインタを合わせると指の形に変わります。クリックした時に何が起こるかとこれはアクションスクリプトを描かなければなりませんのでここでは何も起こりませんけれどもボタンとしての機能はこれで十分果たせています。 でも何も絵が変わらないとボタンということがちょっと分かりにくいですね。マウスポインタを重ねたらどうなるか押したらどうなるかとそういった設定が出来ますのでその変更をボタンシンボルに対して加えます。では、いったん閉じましてボタンシンボルの編集ですからステージに置いたボタンをダブルクリックします。そうすると、シーン1の右側に先ほどつけたbutton という名前がついてそれから、このアイコンがボタンシンボルのアイコンになります。タイムラインを持っています。これはグラフィックシンボルやムービークリップシンボルと一緒なんですがちょっとタイムラインの表示のしかたは変わっていますね。ムービークリップやグラフィックの場合にはそのタイムラインの数字がここに現れたと思うんですけれどもボタンの場合にはアップ、オーバー、ダウン、ヒットという4つのフレームが表示されます。あとのフレームは関係がありません。この4つに対して 設定を行います。アップというのはなにもしない状態のボタンです。では次にオーバーとダウン2つに異った絵を設定したいと思います。それぞれに異った設定をするということはキーフレームにしないといけませんので右クリックでキーフレームに変換します。 これでオーバーとダウンがキーフレームになりました。オーバーというのはマウスポインタを合わせた時の状態です。では、簡単に塗りを選んでこれをグリーンの放射状のグラデーションにします。今度はダウンこれはマウスボタンを押した時です。これは、ではもう一つ残っている赤の放射状のグラデーションということにしてみたいと思います。ではプレビューで確認しましょう。何もしないと 青のグラデーションです。マウスポインタを合わせるとグリーンに変わりました。これがオーバーですねマウスボタンを押します。そうすると 赤に変わるということでアップ、オーバー、ダウンに設定したフレームの絵がそれぞれ表示されるということでこうやるとかなりインタラクティブな印象を与えますね。では問題はもう一つ残った、ヒットというフレームは何に使うかということなんですがそれをちょっと使ってみたいと思います。いったんクローズします。では、絵を変えるだけではなくてオーバー、ダウンの少しサイズも変えてみます。オーバーでダブルクリックをして自由変形ツールで拡大しますかなり極端にそして今度は ダウンでは縮小しましょう。小さくしちゃいます。こうしますともちろんプレビューを見るとマウスポインタを重ねると大きくなりませんね。 もっと真ん中に持ってこないといけませんね。クリックすると小さくなります。そしてマウスポインタを外に持って行くと大きくなります。ちょっとでも使いづらいですね。ここに持ってきても何も変わりません。なぜかというとアップ オーバー ダウン のうち一番右側の形つまりこの一番小さい状態ですね。これがマウスポインタに対して反応する領域になります。ですから、そこまで持って行かないとオーバーにならないんですね。やっぱり マウスポインタに反応するのはこのブルーのアップの領域にしたいと思います。その時に使うのが ヒットのフレームです。ヒットのフレームというのはどの領域がマウスポインタに反応するのかということを定めるわけです。普通はアップ、オーバー、ダウン同じ絵を置きますから気にしなくても良いです。その場合にはデフォルトでそのアップ、オーバー、ダウンの領域で反応するわけですが、このように今回のようにアップ、オーバー、ダウンに違う絵をおいた場合特に大きさが違ったりとか 形が違ったりという場合にマウスポインタに反応したい領域というのがあるわけですがそれが見た目でちょっとおかしくなってしまうと見た目とマウスポインタの反応領域というのがちょっとちぐはぐになってしまうという場合にはヒット領域でヒットのフレームでマウスポインタに反応させたい領域を定めます。 ではクローズしましてヒットの領域にキーフレームを置きます。反応させたいのは、今ダウンの絵が そのまま持ってきてしまいましたけれども反応させたいのは ダウンのこの小さい絵ではなくて消してしまいます。アップですねこれをコピーして全体を選んでコピーしてそしてヒットの領域に同じ位置にペーストです。こうしてあげるとアップの領域がヒットの領域つまりマウスポインタに反応する領域になります。ではプレビューで確認しましょう。マウスポインタをこのブルーの領域に重ねるとちゃんと反応しますね。外に出すとオーバーが直ちにヒットに変わります。ここでマウスボタンを押してもちゃんとダウンの小さい絵になるということでアップ、オーバー、ダウンの絵が変わるとともにヒットの領域も調整されました。このレッスンではボタンシンボルを使ったボタンの作り方についてご説明をしました。

Flash Professional CC 2015 基本講座

Flash ProfessionalはPCだけでなく、モバイル向けにもインタラクティブなアニメーションが作れるソフトウェアです。動画はFlash PlayerだけでなくAIRやHTML5にも書き出せます。このコースではその基本的な操作方法からグラフィックの描画やアニメーション、画像やサウンドの扱い方、そしてActionScriptなどについて説明します。

7時間21分 (78 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。