BACK STEP1 STEP2
STEP3 STEP4
SETP3 MENUを作ってみよう！(Gaiax系)
SETP3では単純なMENUを作ってみます。
いきなり複雑なものに挑戦するのは避けて基本をマスターしながらとりあえず完成させてから色々いじってみてください。
ボタンの種類はMain、Profile、BBS、Diary、Links、Friends、Logの7つにしますが文字、数等はご自由にどうぞ！
※SETP1、2では触れませんでしたが作業をミスしたときは編集＞取り消しで前の状態に戻せますので安心してください。
完成品サンプル
1. FLASHを起動すると550px×400px、背景色白のステージが表示されますので修正＞ムービーで130px×350px、背景色黒に変更してください。
とりあえずファイル＞名前を付けて保存でmenuとしてデスクトップに保存して下さい。また、各区切りで必ず保存しましょう。
※サイズ、背景色は後からでも変更できます。
2. 後で改造しやすくするために7個のレイヤーを作り上からMain、Profile、BBS、Diary、Links、Friends、Logと名前を付けます。
3. Mainレイヤーがアクティブの状態で矩形ツールを選び色を決めます。
※塗りや線の色はウィンドウ＞パネル＞塗りやウィンドウ＞パネル＞線で後からでも変更できます。
4. 矩形を描画するには描く位置の左上から右下までドラッグします。
※サイズは後からウィンドウ＞パネル＞情報や伸縮ツール等で変更できます。
5. 描画した矩形の真中あたりをクリックして選択します。
※この場合Wクリックするとアウトライン(線)も選択されます。
6. ウィンドウ＞パネル＞色見本の下段のグラデーションから線状の白黒をクリックします。
※グラデーションの色等は後からウィンドウ＞パネル＞塗りで変更できます。
※赤い線の部分をクリックするとポイント(鉛筆マーク)追加。ポイントを下方にドラッグで削除。ポイントをスライドさせて色の分布を変更。ポイントをクリックして色の変更。(アルファの変更はミキサーを使います。)
7. 矩形以外の位置をクリックするか編集＞すべての選択を解除してからバケツツールをクリック、塗りの変形をクリックします。
※塗りの変形はグラデーションのみに有効で単色塗りには使えません。
8. 矩形の中央あたりをクリックして変形ハンドルを表示させ回転ハンドル(○)を下にドラッグして左白、右黒を上白、下黒に変更します。
9. 下の伸縮ハンドル(□)を少々上にドラッグします。
10. 矢印ツールにして矩形をWクリックして塗りと線の両方を選択します。
※編集＞すべて選択でもOK。
11. 右クリックしてポップアップメニューからコピーか編集＞コピーして編集＞同じ位置にペーストします。
続けて伸縮ツールをクリックして伸縮ハンドルを表示させます。
12. 伸縮ハンドルをドラッグしてペーストした矩形を少し縮小します。
この場合はオブジェクトの吸着は解除したほうがやりやすいです。
※サイズや位置変更等を精密に行いたい場合はウィンドウ＞パネル＞情報で行いましょう。
※また拡大表示にすると作業がやりやすいです。
13. 選択状態で続けて修正＞変形＞縦反転して先ほどの方法で選択解除します。
14. バケツツールをクリック、塗りの変形をクリック、中央の矩形をクリックし伸縮ハンドルをドラッグして中央の矩形の陰影を微調整します。
15. インクボトルツールをクリックしてウィンドウ＞パネル＞線を表示させ線のカラーを＃333333にします。
※色の変更は該当するパネルの色のついた四角い部分をクリックします。
※線のカラーはウィンドウ＞パネル＞ミキサーでも決められます。
16. 矩形の外側と内側の線をクリックして線の色を変更します。
※線の色は線をWクリックして線パネルやミキサーパネルで変えることもできます。
17. テキストツールをクリックしてから矩形上でクリックしテキスト入力モードにしてMainと入力します。
18. 矢印ツールにしてからウィンドウ＞パネル＞文字でフォント、サイズ等を決定します。
例ではフォントTimes New Roman ボールド、フォントの高さ18、カラーを白にしています。
19. ウィンドウ＞パネル＞段落を中央揃えにしてから文字(Main)をドラッグするかクリックしてからカーソルキーで位置を調整します。
※もちろん情報パネルでも移動できますし編集＞すべてを選択してからウィンドウ＞パネル＞整列でも変更できます。
20. 編集＞すべてを選択して右クリックしてポップアップメニューからコピーか編集＞コピーして編集＞同じ位置にペーストしてから[Shift]を押したまま[↓]を5回押して下さい。
以降、編集＞コピーして編集＞同じ位置にペーストしてから[Shift]を押したまま[↓]を5回押すを繰り返して矩形のコピーが7個になるまで繰り返します。
21. 上から2つめの文字をWクリック、続けてWクリックしてProfileと入力、同様に他のTEXTも変更します。
※文字の変更はWクリック後[Delete]や[Back space]キーで削除してから入力してもいいです。
22. 表示を200%くらいに拡大して矢印ツールでMain矩形を選択します。
※矩形より外側の左上から右下までドラッグします。
23. 挿入＞シンボルに変換を選択、シンボルプロパティの名前をMain、タイプはボタンにします。
同様にProfile矩形からLog矩形まで名前は各矩形と同じにしてタイプは全てボタンにしてください。
24. この時点から各矩形はオブジェクトからボタン(シンボル)として登録されました。
ウィンドウ＞ライブラリで確認してみてください。
25. このままでも各ボタンにアクションを設定すればMENUとして動作しますがマウスオーバーとマウスダウンで変化するようにしてみます。
現在、全てのボタンはMainレイヤーにありますので、とりあえず各レイヤーに移してみます。
Profileボタンの上で右クリック＞カットしてからProfileレイヤーをアクティブ(クリック)、編集＞同じ位置にペーストしてください。
同様の方法で他のボタンも各レイヤーにペーストしてください。
26. MainボタンをWクリック、オーバーフレームで右クリックしポップアップメニューからキーフレームの挿入を選択します。
同様にダウンフレームにもキーフレームの挿入を行います。
※SETP2のようにフレームのコピー、ペーストでも同様の作業ができます。
27. オーバーをクリックして再生ヘッド(赤い線)をオーバーフレームに移動させます。
28. 線パネルで色を＃00FF00の緑にしてインクボトルツールを選択、矩形のラインをクリックします。
※色は好みでどうぞ！
29. 文字をクリックして文字パネルかミキサーパネル等で文字色を＃00FF00にします。
同様にダウンの色も変更して残りのボタンも全て変更してみてください。
※色は好みでどうぞ！
30. シンボルの編集を終了してシーンの編集に戻ります。
31. 次にアクションの設定をします。
Mainボタンをクリックしてウィンドウ＞アクションの基本アクションにあるGet URLをWクリックします。
32. URLにはhttp://からmain.htmlまでのURLを入力しますが、わからない時は実際にページを開きMENUのMainの上で右クリック、ショートカットのコピーを選んでURL欄で右クリック、貼り付けを選びます。
ウィンドウ欄には必ず半角大文字でMAINと入力してください。（HTMLで言うtarget=MAINと同じことになりますのでフレームを使ってない場合はこの欄は空白のままにします。）
他のボタンも同様にアクション、該当する各URL等を入力してください。
33. 書き出す前に配置を整えてみます。
Mainボタンをクリックしてカーソルキーで少々上にLogボタンを下に移動してからすべてを選択します。
34. ウィンドウ＞パネル＞整列の中央分布(垂直方向)をクリックします。
35. 終わったらムービープレビューで動作を確認するか書き出してみましょう。
ファイル＞ムービーの書き出しで、ファイルの種類を必ずFlash Player(*.swf)にし、ファイル名はmenuにします。
保存をクリックするとFlash Player書き出しのダイアログが表示されますので図のようにしてください。
36. ページに貼り付けてみる
この透明GIFをダウンしてからmenu.swfと一緒にバイナリ(データ形式)でFTPします。
※Gaiaxの画像アップローダーではSWFはアップできません。
ここではhttp://www.hogehoge.co.jp/~anata/にアップしたと仮定します。
ページにログインしてメニューの編集に入ります。
お知らせ欄に
<EMBED src=http://www.hogehoge.co.jp/~anata/menu.swf quality=high
bgcolor=#000000 WIDTH=130 HEIGHT=350>
と入力して、通常メニューで非公開にします。
Mainはタイトルも削除、Mainの通常時画像のURLに
http://www.hogehoge.co.jp/~anata/0.gif
と入力します。
※http://www.hogehoge.co.jp/~anata/の部分は必ず実際のURLにしてください。
つづく？
BACK STEP1 STEP2
STEP3 STEP4
