スマホサイト・アプリをつくろう。

前回は、シンプルなケータイFlashの作り方について説明しましたが、今回はもう少し本格的なページの作り方について説明します。
Flash 8 Professionalをベースに説明していますので、別のバージョンでは一部操作が異なる場合があります。
参照：ケータイFlashのページを作ってみよう
　
　

---

初期設定

・新規Flashドキュメントを作成し、名前を付けて保存しておきます。
　
・パブリッシュバージョンを「Flash Lite 1.1」に変更します。
　
・ドキュメントサイズを「240px×240px」に設定します。
　
・テストデバイスを設定しておきます。
　
これで最初の準備ができました。
　
　

---

ボタンを用意する

・以下のようにグリッドを設定するとボタンを配置しやすくなります。
　
　・「表示－グリッド－グリッドの表示」でグリッドの表示をONにします。
　
　・「表示－グリッド－グリッドの編集」でグリッド幅を設定します。
　（例：20px×20px）
　このとき、「グリッドの吸着」をONにしてグリッドに合わせて配置できるようにします。
→[図25]
　
・矩形ツールで四角形のシェイプ（塗り）を作成します。
（例：20px×20px）
シェイプは左上の位置に作成します。
→[図26]
　
・「修正－シンボルに変換」でシェイプをボタンシンボルに変換します。
　基準を左上にすると位置を揃えやすくなります。
→[図27]
　
・ボタンをダブルクリックしてボタンを編集します。
→[図28]
　
・アップのフレームの四角をヒット領域に移動してボタンを見えなくします。
→[図29]
　
・最初の「シーン」に戻って最初に作ったライブラリからドラッグして最初のボタンの下にボタンを４つ配置します。
→[図30]
　
これでボタンが配置できました。
　
　

---

レイヤーを追加する

・「シーン」にレイヤーを２つ追加します。
※現在の場所に迷わないように、現在のレイヤーがどこかを常に把握するようにしましょう。
　
・レイヤー名を設定します。
　・一番目：action
　・二番目：page
　・二番目：button
→[図31]
　
・2フレーム目の全レイヤーを選択して「右クリック－フレームの挿入」で2フレーム目まで広げます。
→[図32]
　
・actionレイヤーの2フレーム目を選択して「右クリック－キーフレームに変換」でキーフレームにします。
→[図33]
このとき「プロパティ－フレーム」にフレームラベルを「motion」と設定します。
→[図34]

　
これでレイヤーの準備ができました。
　
　

---

画面を用意する

・別に作成した画像をライブラリにドラッグ＆ドロップして登録します。
※この画像はできるだけサイズを下げておきます。
　
・pageレイヤーに登録した画像を読み込みます。
→[図35]
　
・「修正－シンボルに変換」で画像をムービークリップにします。
→[図36]
このとき「プロパティ－インスタンス名」でムービークリップのインスタンス名を「main」に設定します。
　
・作成したムービークリップの中に入ります。
　
・画像を選択してグラフィックシンボルにします。
→[図37]
　
・ムービークリップ内にレイヤーを２つ追加します。
　
・レイヤー名を設定します。
　・一番目：cursor
　・二番目：text
　・二番目：back
　
・textレイヤーに文字を入れます。
ここではメニューを５つ作成しています。
→[図38]
　
・cursorに新たにカーソルとして多角形（三角形）でシェイプを作成し、シェイプをムービークリップにします。
カーソルはインスタンス名（「フレームラベル」の表記は誤りにつき訂正）を「cursor」にして配置しておきます。
→[図39]
　
・ページができたらシーン１に戻ります。
　
これで画面が用意できました。
　
　

---

アクションを設定する

・pageレイヤーの表示をOFFにしてボタンを表示します。
　
・buttonレイヤーを選択して一番上のボタンを選択し、以下のアクションを記述します。
→[図40]

on (rollOver) {
    selectNo = 1;
    call("motion");
}
on (press) {
    getURL("link1.html");
}

ボタンが選択されると現在の選択ボタン番号として「selectNo」に値を設定して、
call関数でmotionラベルのフレームアクションの内容を実行します。
ボタンがクリックされると指定URLにリンクします。
　
・その他の４ボタンにも同様のアクションを設定します。
selectNoとリンク先URLはそれぞれ変更します。
→[図41]
　
・actionレイヤーの1フレーム目を選択してアクションに以下のように記入します。
→[図42]

_focusrect = false;
stop();

「_focusrect」は前回の記事で出ていた枠カーソルの表示状態です。
今回は枠カーソルを使わないのでこれをOFF（false）にしてボタンの枠選択状態を隠します。
「stop();」はこのフレームで停止するという意味になります。
2フレーム目以下のフレームアクションを実行しないように止めておきます。
　
・pageレイヤーの表示を有効にします。
ページのムービークリップをダブルクリックして中に入ります。
　
・フレームを２フレーム目まで追加し、１レイヤー追加します。（actionレイヤー）
　
・追加したレイヤーの２フレーム目でキーフレームに変換を行います。
　
・1フレーム目には以下アクションを設定します。
→[図43]

_y += (../:pageY-_y)/3;

mainインスタンスの縦位置を変更するアクションです。
　
・2フレーム目には以下アクションを設定します。
→[図44]

gotoAndPlay(1);

1フレーム目に戻ってループするアクションです。
これにより縦位置が揃うまで動き続けます。
　
・シーン１に戻り、actionレイヤーの２フレーム目に以下アクションを設定します。
pageYが画面のスクロール先の縦座標になります。
main/cursorはカーソルの座標です。
それぞれの座標はデザインに応じて調整して下さい。
→[図45]

if (selectNo == 1) {
	pageY = 0;
	main/cursor:_x = 10;
	main/cursor:_y = 91;
}
if (selectNo == 2) {
	pageY = -50;
	main/cursor:_x = 35;
	main/cursor:_y = 162;
}
if (selectNo == 3) {
	pageY = -100;
	main/cursor:_x = 55;
	main/cursor:_y = 233;
}
if (selectNo == 4) {
	pageY = -150;
	main/cursor:_x = 80;
	main/cursor:_y = 304;
}
if (selectNo == 5) {
	pageY = -200;
	main/cursor:_x = 102;
	main/cursor:_y = 375;
}

　
　

---

動作を確認してサーバーにアップする

・制御－ムービープレビューで実行します。
　
・上下で画面がスクロールし、ボタンクリックでリンクできれば成功です。
→[図46]
　
・動作が確認できたらサーバーにアップして実機で確認します。
　
　

---

flaファイルサンプル

sample1368.zip※Flash8形式
→こちらよりダウンロードしていただけます。
　
　

---

実行例

実行例はこちらからご確認下さい。

→URLをメールで送る
http://ookura.tanikaze.com/Sample/post1368/
　
　

---

参考書籍

携帯Flashサイト&ゲーム制作入門―Flash Lite「1.0」「1.1」対応
　
　

---

関連ページ

ケータイFlash関連の記事一覧
　
　

---