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

前回、ケータイFlashの概要について説明しましたが、今回は基本的な作り方について説明していきます。
参照：ケータイFlashの概要について
　
　

ケータイFlash制作に必要なもの

ケータイFlashを制作するには以下のものが必要になります。
　
・オーサリングソフト
Flash Lite 1.1のSWFファイルは以下のいずれかのバージョンのFlashで作成できます。
　・Adobe Flash CS4 Professional
　・Adobe Flash CS3 Professional
　・Macromedia Flash 8 Professional
　・Macromedia Flash MX 2004 Professional (7.2以降)
　※Flash MX 2004及びFlash MXのバージョンでFlashLiteをパブリッシュする際は別途CDKのインストールが必要です。
　
・ファイルをアップするサーバー環境
　
・Flash Lite 1.1に対応したケータイもしくはシミュレーター
　
　

ケータイFlash制作の流れ

Flash制作の流れとしては以下のような流れになります。
FlashでFLAファイルを新規作成
↓
パブリッシュ設定・画面サイズ設定
↓
素材（テキスト・画像・ボタンなど）を配置
↓
アクションスクリプトを記述
↓
SWFファイルをパブリッシュして動作確認
↓
SWFファイルをサイトにアップして実機確認
　
次からは上記の作業を順を追って説明していきます。
　
　

初期設定

・Flashのオーサリングソフトを立ち上げます。
　
・「ファイル－新規作成」からFlashドキュメントを選択します。
→[図1]　→[図2]
　
・「ファイル－名前を付けて保存」で保存しておきます（例：sample1.fla）
→[図3]　→[図4]
※先に保存するのはパブリッシュの際にデフォルトの名前でswfファイルが生成されてしまうのを防ぐためです。
　
・「ファイル－パブリッシュ設定」でFlashタブを選択し、「バージョン」を「Flash Lite 1.1」に変更します。
→[図5]
　
・「修正－ドキュメント」でドキュメントサイズを「240px×240px」に設定します。
→[図6]
　
・「ファイル－デバイス設定」で「コンテンツタイプ」を「ブラウザ」にして「テストデバイス」を設定します。
→[図7]
ここでは「KDDI Toshiba W31T」で設定しています。
　
・「制御－ムービープレビュー」（またはCtrl+Enter）で実行結果が表示されます。
→[図8]
今は空っぽの状態なので何も起きませんが実際にボタンを押して確認することができます。
このとき、同時にswfファイルが生成されます。
もしエラーがある場合はこの時点でエラー内容が表示されます。
確認が終わったらウィンドウを閉じます。
　
　
これでflashを作る準備が完了しました。
　
　

テキストを配置する

・左のアイコンメニューから「テキストツール」を選択します。
→[図9]
　
・画面の白い部分（※ステージ）をクリックすると入力ボックスが表示されますので、文字を入力します。
→[図12]
ここではサイトのタイトルとして「サンプルサイト」と入力しました。
　
・テキストに関しては画面下の「プロパティ」で以下の通り設定します。
　・テキストの種類：「静止テキスト」
　・フォントの種類：「_等幅」
　・フォントサイズ：「24」
　・フォントの色：「黒（#000000）」
→[図11]
　
・アイコンメニューで「選択ツール」を選んで文字をドラッグ＆ドロップすると、文字を好きな場所に移動できます。
→[図13]
　
・テキストは複数行入力することもできます。
→[図15]
　
これでテキストを配置できました。
　
　

リンクを設定する

・テキストでリンクの文字をセットします。
リンクと分かりやすいように青色をつけておきます。
→[図16]
　
・リンクの文字を選択して「修正－シンボルに変換」でシンボルに変換します。
今回は「タイプ」は「ボタン」を選択して「名前」は分かりやすい名称をつけます。
→[図17]
　
・プロパティが「ボタン」になり、ボタンシンボルに変わりました。
右側のライブラリにも追加されているのがわかります。
→[図18]
　
・リンクボタンを選択したまま、「ウィンドウ－アクション」でアクションパネルを出します。
→[図19]
　
・アクションパネルに以下のようにアクションを設定します。
→[図20]

on (press) {
    getURL('link1.html');
}

ボタンを押したときに実行する「on (press) {}」の中に、
リンク先に移動する処理「getURL(‘link1.html’);」
が入っています。
　
・同じようなリンクをもう一つ作ってみます。
→[図21]
　
・「シンタックスチェック」をクリックすると、スクリプトのエラーチェックができます。
→[図22]
エラーが出た場合は再度スクリプトを確認してみてください。
　
これでリンクが設定できました。
　
　

動作確認して生成

・「制御－ムービープレビュー」で実行します。
→[図23]
　
・上下ボタンをクリックするとリンクが順に選択できるのがわかります。
　
・実際に決定ボタンをクリックするとリンクされますがページがないためエラーになります。
　
・確認が終わったら「ファイル－保存」で保存しておきます。
　
・保存フォルダにflaファイルとswfファイルができているのが確認できます。
→[図24]
　
次はサーバーにアップロードします。
　
　

アップロードして実機確認

・FTPソフト等でサーバーにswfファイルをアップロードします。
※リンク先のページを作成しておくと実際にリンクの動作を確認できます。
　
・ケータイで実際にswfファイルにアクセスします。
自分の持っていないキャリアについてはシミュレーターで確認するとよいです。
　
・上下でボタンが順番に選択され、ボタンサイズに応じた枠が表示されるのが確認できます。
　
今回は導入編ということでかなりシンプルなFlashページの作り方について説明しました。
　
　

実行例

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

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

参照URL

Adobe – Flash サポート- ダウンロード
http://www.adobe.com/jp/support/flash/downloads.html#flashmx2004
Flash MX 2004でFlash Liteを作成するためのCDKは上記URLよりダウンロードできます。
　
[Think IT] 第3回：徹底検証！携帯シミュレーター (1-3)
http://www.thinkit.co.jp/article/142/3/
携帯シミュレーターについてはこちらが参考になります。
　
　

関連ページ

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