Android端末でも動く! Flash Liteでつくるケータイ向けコンテンツ

概 要

Flash Liteを利用したモバイル向けコンテンツの制作手法を解説したガイドブックです。Adobe Flash Lite(アドビ フラッシュ ライト)はアドビシステムズがケータイやAndroidスマートフォンなどの携帯機器向けに開発したFlashの軽量版です。本書はAdobe Flash Professional CS5 Windows版をベースに、Flash Liteの基本文法、図形の描画、アニメーションといった基本的な知識や機能を解説。そのうえでプレゼン用アプリや、Google Maps APIを利用した地図アプリ、さらには絵本アプリや動画再生アプリ、足跡帳といった実際のアプリケーション開発を通してモバイル向けFlashコンテンツの作成技法を学びます。サンプルデータのダウンロードサービス付き。

著者 大西武
価格 本体2200円(税別)
ISBN 978-4-7980-2969-6
発売日 2011/5/20
判型 B5変
色数 2色
ページ数 272
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 Flash Liteとは? Flash Liteの基本文法

1-1 Flash Liteで作ると何が凄い?

Flash Liteの優位点

携帯電話で動くFlash Lite

Flash Liteのバージョン

1-2 FlashとHTML5

FlashとHTML5のどちらを使うべきか?

Flashが有利

音は使わない方がいい

Flash Liteはたくさん使われている

FlashはSNSでも人気

携帯向けに作ったFlash LiteはPCでも動く

1-3 Flash Professional CS5/Illustrator CS5とは

Flash CS5のIDE

Flash CS5について

Illustrator CS5

Illustrator CS5について

1-4 Flash Lite 2.0の基本文法

Flash Lite 2.0向けActionScript 2.0の基本文法を学ぼう!

変数とは?

定数とは?

関数とは?

クラスとは?

配列とは?

ステートメント

if文

for文とは?

break

case

else

else if

import

private

public

return

switch

true

false

グローバル関数

Array([numElements], [elementN]) : Array

Boolean(expression:Object) : Boolean

getURL(url:String, [window:String], [method:String])

gotoAndPlay([scene:String], frame:Object)

gotoAndStop([scene:String], frame:Object)

nextFrame()

on(mouseEvent:Object)

onClipEvent(movieEvent:Object)

play()

stop()

trace(expression:Object)

グローバルプロパティ

_focusrect

_parent

_root

this

第2章 直線と曲線と塗り潰し

2-1 直線の描画

直線を描こう!

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

プレーヤーのバージョンを決める

直線を描く

線の太さを設定する

2-2 曲線の描画

直線から曲線へ変形~曲線の描画(1)

選択ツールを選択

直線をドラッグして曲線に変形

もう一つの曲線の描き方~曲線の描画(2)

前項とは違った曲線の描き方

空白画面の用意

ペンツールの選択

ペンツールでドラッグして曲線描画

何度でもできる曲線の変形

ダイレクト選択ツールの選択

曲線の片方の頂点を選択

頂点をドラッグして曲線を変形

2-3 塗り潰し

直線や曲線で囲んだ内側を塗り潰して絵の仕上げ

隙間の無い囲まれた線

塗りのカラーを好きな色で

バケツツールを選択

線で囲まれた部分を塗り潰し

塗り潰しがうまくいかなければ虫めがねツールで拡大して確認

直線と曲線と塗り潰しで図形を描画

2-4 3Dのように見える2Dベクター図形

まるで3DCGのように2DCGで描く!

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

ライブラリに読み込み

Originレイヤー

ライブラリからステージへ

「Origin」レイヤーのロック

新規レイヤーの作成

空白キーフレームを挿入

「ペンツール」の選択

「ペンツール」で線をトレース

「バケツツール」で塗りのカラー

グラデーションの色

塗り潰し

塗り潰しの中心の移動

「タイムライン」で「Origin」レイヤーを非表示に

全ての12個の画像をトレース

注意すること(1)

注意すること(2)

プレビュー

2-5 ファイルの保存・書き出し

完成したドキュメントの保存・Flashムービー書き出し

ドキュメントの保存

Flashムービーの書き出し

swfの実行

第3章 Flashアニメをつくろう!

●本章で作成するアニメ

3-1 Flashアニメの作成

Flashアニメを作ろう!

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

ライブラリに読み込み

ダイアログでライブラリに読み込むファイルを選択

ライブラリ

ライブラリからステージにドラッグ

タイムラインでフレームを挿入

タイムラインで空白キーフレームを挿入

ライブラリからタイムラインに絵素材を配置

タイムラインで空白キーフレーム

タイムラインにどんどん空白キーフレームと絵素材を配置

最後のフレーム挿入

新規レイヤーで文字の入力

テキストツールで文字入力

文字のプロパティ

ドキュメントメニューの実行

ステージの色を空色にし、再生速度の変更

プレビュー

リプレイボタン

3-2 アニメーションをリプレイ

はじめてのFlash Lite 2.0プログラミング

ActionScript 2.0形式でプログラミング

新規レイヤーを作成

レイヤー名をScriptに

キーフレーム作成

Replay~というテキスト入力

シンボルに変換

ボタンシンボルに変換

ボタンになったReplay~の文字をダブルクリック

ボタンのタイムライン

グラフィックシンボルに変換

マウスオーバー時の処理

マウスダウン時の処理

マウスヒットの範囲

マウスヒットする矩形の作成

ボタンについてのマウスの処理完成

元のシーンに戻る

ActionScriptの作成

アクションパネルで再生ストップ

Replay~ボタンのアクションパネル

ActionScriptの記述

ActionScriptの解説

フォーカス矩形の非表示

完成

3-3 Flash Lite 4.0向けに修正

Flash Lite 4.0プログラミング

パブリッシュ設定

パブリッシュ設定ダイアログ

フォーカス矩形の非表示

ボタンアクションの削除

リプレイボタンにインスタンス名を付ける

ActionScriptの記述

ActionScriptの解説

完成

第4章 プレゼン用アプリの作成

●本章で作成するプレゼン用アプリ

4-1 文字のスクロール

トゥイーンアニメーションで、文字を徐々にスクロール

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

ライブラリに読み込み

ダイアログでライブラリに読み込むファイルを選択

ライブラリ

ラベル

ラベル名「Start」を付ける

ラベル名「Graph」を付ける

新規レイヤー作成

選択フレームを削除

説明文の入力

ステージに合わせて整列

モーショントゥイーン

位置のキーフレームの挿入

位置のトゥイーン

ボタンシンボルに変換

ボタンの設定

新規レイヤー「Script」

停止アクション

「WordBtn」ボタンが押されたら

説明文のプレビュー

4-2 グラフの作成

アニメーションするグラフを作ろう!

新規レイヤーを作り、「Graph」と名前変更

キーフレーム挿入

線ツール

グラフの描画

グラフに文字を追加

グラフをムービークリップに変換

棒グラフの準備

「CompanyA」レイヤーに「CompanyABtn」ボタンの作成

ボタンシンボルに変換

拡大した時のために整列

「CompanyABtn」の移動

「CompanyB」レイヤーに「CompanyBBtn」ボタンの作成

「CompanyUs」レイヤーに「CompanyUsBtn」ボタンの作成

ボタンのモーショントゥイーン

棒グラフ「CompanyABtn」の伸縮

「CompanyBBtn」「CompanyUsBtn」の伸縮

停止スクリプトの記述

「CompanyABtn」ボタンの分岐スクリプトの記述

「CompanyBBtn」ボタンの分岐スクリプトの記述

「CompanyUsBtn」ボタンの分岐スクリプトの記述

「GraphMC」で、携帯電話やキーボードのボタンが押された時のスクリプトの記述

プレビュー

4-3 A社のおもちゃに対する犬の態度

A社のおもちゃに対して犬がどんな態度を取るか?

「CompanyA」ラベルを貼る

おもちゃ「Five」レイヤーを作成

「Five」レイヤーにキーフレームの追加

多角形ツール

青い五角形のおもちゃを作成

モーショントゥイーンを作成

おもちゃのキーフレームの挿入

犬のレイヤー作成

犬の画像配置

戻るスクリプト

プレビュー

4-4 B社のおもちゃに対する犬の態度

B社のおもちゃに対して犬がどんな態度を取るか?

「CompanyB」ラベルを貼る

おもちゃ「Star」レイヤーを作成

「Star」レイヤーにキーフレームの追加

多角形ツール

緑の星型のおもちゃを作成

モーショントゥイーンを作成

おもちゃのキーフレームの挿入

犬のレイヤー作成

犬の画像配置

戻るスクリプト

プレビュー

4-5 弊社のおもちゃに対する犬の態度

弊社のおもちゃに対して犬がどんな態度を取るか?

「CompanyUs」ラベルを貼る

おもちゃ「Ball」レイヤーを作成

「Ball」レイヤーにキーフレームの追加

多角形ツール

緑の星型のおもちゃを作成

モーショントゥイーンを作成

おもちゃのキーフレームの挿入

犬のレイヤー作成

犬の画像配置

戻るスクリプト

プレビュー

4-6 プレゼンアプリをFlash Lite 4.0で

Flash Lite 4.0のActionScript 3.0でプログラミング

パブリッシュ設定

GraphMCのアクションの削除

「Word」ボタンのアクションの削除

ボタンインスタンスのアクションの削除

フォーカスなしに設定

「WordBtn」ボタンインスタンスにインスタンス名を付ける

「WordBtn」ボタンが押された時の処理

棒グラフのボタンインスタンス

キーフレームの挿入

棒グラフのボタンやキーが押された時

プレビュー

第5章 地図アプリの作成

●本章で作成する地図アプリ

5-1 Google Maps API for Flashの準備

Google Maps API for Flashのダウンロード

Google Maps API for FlashのWebサイト

登録してGoogle Maps APIキーを取得

利用規約

Google Maps API に登録する

Google Maps API for Flash SDKをダウンロード

「map_1_20.swc」ファイルのコピー

5-2 Googleの地図表示

Google地図を表示

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

モバイル向けのドキュメントの新規作成

Mapレイヤーの新規作成

GoogleMapsLibraryコンポーネント

新規レイヤー「Script」

「Script」レイヤーにActionScriptを記述

プログラムの解説

「stop()」を記述しないのは?

プレビュー

5-3 郵便番号で地図検索

郵便番号を元に地図を移動して表示

新規レイヤー「Zip」作成

「〒」を描画

テキスト入力ボックスの作成

Buttonコンポーネント

「Script」レイヤーでプログラミング

プログラムの解説

プレビュー

第6章 絵本アプリの作成

●本章で作成する絵本アプリ

6-1 絵本作成

絵本を作る準備をしよう

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

ライブラリに読み込み

ダイアログでライブラリに読み込むファイルを選択

ライブラリ

背景色

レイヤー名

テキストツールで文字を記述

インスタンス名を付ける

シンボルに変換

新規レイヤー

「Word0」レイヤーの非表示

Cat0レイヤーに画像を配置

シンボルに変換

Cat0レイヤーの非表示

セリフと画像の配置

6-2 Flash Lite 2.0で絵本作成

Flash Lite 2.0で絵本作り

新規レイヤー「Script」

「Script」レイヤーにActionScriptを記述

ActionScriptの解説

新規レイヤー「NextBtn」の作成

矩形の作成

「NextBtn」ボタンの作成

「NextBtn」ボタンのヒット

「NextBtn」ボタンインスタンスでActionScript

ActionScriptの解説

プレビュー

6-3 Flash Lite 4.0で絵本作成

Flash Lite 4.0で絵本作り

パブリッシュ設定

タイムラインで「NextBtn」レイヤー削除

「Script」レイヤーでActionScript

ActionScriptの解説

プレビュー

第7章 英語で加減乗除ゲーム「English Arithmetic」アプリの作成

●本章で作成する加減乗除ゲームアプリ

7-1 Flash Lite 2.0で英語とアラビア数字で加減乗除

Flash Lite 2.0で加減乗除を英語で出題

レイヤー名を「Calc」に

「Calc」レイヤーに「テキスト入力」文字を

新規レイヤー「Script」

「Script」レイヤーにActionScriptを記述

加減乗除のプログラムの解説

プレビュー

7-2 Flash Lite 2.0でアルファベットで加減乗除

Flash Lite 2.0で英語のみで加減乗除の計算を

「Script」レイヤーにActionScriptを

ActionScriptの解説

プレビュー

7-3 加減乗除の問題に答える処理

加減乗除の計算問題に答えられるようにプログラミング

新規レイヤー「Right」

新規レイヤー「Mistake」

「Script」レイヤーでActionScriptを

ActionScriptの解説

プレビュー

7-4 0~9ボタンの配置とタイムとスコア

0~9ボタンとタイムとスコアを配置しよう

新たに「Button」レイヤー作成

「Button」レイヤーに0ボタン作成

「Button0」ボタンの設定

「Button1」~「Button9」のボタン作成

新たに「Time」レイヤーの作成

「_timeTxt」の作成

「SCORE」の作成

「Button0」インスタンスに、ActionScriptを記述

「Button1」~「Button9」のボタンインスタンスも同様に

「Script」レイヤーでActionScriptを記述

プログラムの解説

黒枠の描画

プレビュー

7-5 Flash Lite 4.0で加減乗除の英語計算ゲーム

Flash Lite 2.0からFlash Lite 4.0に作り直し

パブリッシュ設定

「Button0」~「Button9」のボタンインスタンスのActionScriptを削除

「Button0」~「Button9」のボタンにインスタンス名を付ける

「Script」レイヤーにActionScriptを記述

ActionScriptの解説

プレビュー

第8章 動画再生アプリの作成

●本章で作成する動画再生アプリ

8-1 FLVファイルの作成

Adobe Media Encoder CS5でflvファイルを作ろう!

Adobe Media Encoder CS5の起動

動画ファイルの読み込み

設定

書き出し設定

キューを開始

8-2 swfファイルにflvファイルを埋め込む

swfファイル内部にflvファイルを埋め込んで再生

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

モバイル向けのドキュメントの新規作成

ステージに読み込み

ビデオの読み込み

埋め込み

ビデオのプロパティ

ビデオのフレームレート

プレビュー

8-3 外部FLVファイルを再生

外部flvファイルを再生しよう!

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

モバイル向けのドキュメントの新規作成

ドキュメントの保存

「FLVPlayback」コンポーネント

「FLVPlayback」のプロパティ

プレビュー

第9章 PHPと連携したアプリの作成(ゲーム+ランキング)

●本章で作成するアプリ

9-1 クリック数を競うシンプルゲームの作成

クリックした回数を競う単純ゲームを作ろう!

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

レイヤー名を「Word」に

「Word」レイヤーに説明を

新規レイヤーを「StartBtn」に

「StartBtn」ボタンを作成

ActionScriptの記述

ActionScriptの解説

新規レイヤー「Script」

ActionScriptのコーディング

新規レイヤー「SCORE」

「SCORE」の第「2」フレームに「ScoreTxt」

新規レイヤー「TIME」

「TIME」の第「2」フレームに「TimeTxt」

新規レイヤー「Collision」

「Collision」の第「2」フレームに「CollisionBtn」

「CollisionBtn」ボタンの設定

「CollisionBtn」にアクション

第「2」フレームにActionScript

「Word」レイヤーに「RankBtn」ボタン

「RankBtn」ボタンのアクション

「Script」のActionScript

プレビュー

9-2 ログデータを一覧表示

ログデータを一覧表示しよう!

テキストエディタの用意

「ranking.php」を作成

FTPでアップロード

PHPプログラムの記述だけ

ログファイルの用意

ログデータのランキング表示

FTPのパーミッション

ブラウザで閲覧

9-3 得点と名前を登録

得点と名前を登録しよう!

得点と名前登録のコーディング

FTPでサーバにアップロード

ブラウザで閲覧

9-4 得点ランキングの完成

得点ランキングを完成させよう!

得点ランキングのコーディング

「ranking.php」の解説

ブラウザで閲覧

9-5 Flash Lite 4.0で得点ランキング

ゲームをFlash Lite 4.0に作り変えよう!

パブリッシュ設定

「Collision」レイヤーの削除

「RankBtn」の削除

フレームを削除

「StartBtn」レイヤーのインスタンス名

「Script」の第「1」フレームでコーディング

ActionScriptの解説

「Script」の第「2」フレームでコーディング

プレビュー

第10章 XMLを読み書きした足跡帳

●本章で作成するアプリ

10-1 XMLデータを読み込んで名前一覧表示

読み込んだXMLデータを一覧表示

Adobe Flash Professional CS5の起動

新規ドキュメントの作成

携帯電話向けのドキュメントの新規作成

Flashプレーヤーのバージョンを決める

レイヤー名を「Script」に

「Script」にActionScriptを

新規レイヤー「Button」

開始文字

「StartBtn」ボタンシンボルに変換

「StartBtn」ボタンにActionScriptを

新規レイヤー「Name」

「Name」レイヤーにテキストボックス

ダイナミックテキストを10個作成

「SubmitBtn」ボタンの作成

「Script」レイヤーの第「2」フレームにアクション

プレビュー

10-2 XMLデータをPOST

XMLデータをPOSTしよう!

「_submitBtn」にActionScript

ActionScriptの解説

XMLファイルの読み込みの注意

PHPファイル

10-3 PHPファイルでPOSTしたデータを受け取り

PHPファイルでPOSTされたxmlデータを受け取ろう!

テキストエディタでPHPをコーディング

PHPの解説

「bbs.php」の保存

実行

10-4 Flash Lite 4.0で足跡帳

ActionScript 3.0で足跡帳

パブリッシュ設定

「Button」レイヤー削除

第1フレーム削除

「_submitBtn」のアクション削除

「Script」にコーディング

ActionScriptの解説

asファイルの新規作成

asファイルにコーディング

名前を付けて保存

ActionScriptファイルの作成

「LoadXMLData」の解説

プレビュー

10-5 Flash Lite 4.0でPOST

ActionScript 3.0でPOSTしよう!

「Script」でActionScript記述

asファイルの新規作成

名前を付けて保存

bbs.xmlファイル名

実行

PR

秀和システム