ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―

面白法人カヤックが運営するサービス、ブラウザでFlashが作れる「wonderfl build Flash online」を使って、いますぐはじめよう。本書で紹介しているサンプルはwonderflから試せて、動作がそのままブラウザ画面で確認できます。構成は、ActionScript初心者にもわかりやすい入門編と本格チュートリアル編の2本立て。チュートリアル編では、豪華執筆陣がそれぞれのテーマをわかりやすく解説しています。
＊「wonderfl build Flash online」は平成21年度メディア芸術祭審査委員会推薦作品に選出されました！

在庫あり

ご注文日から最短２営業日でお届けいたします。詳しくはこちら。この商品は送料無料にて、ワークスコーポレーションが直接販売、発送いたします。

この商品のお求め方法

定価	3,570円（税込）
判型	B5変型
総ページ数	376
発売日	2009年12月18日
ISBN	978-4-86267-077-9
著者	面白法人カヤック＆フォークビッツ

数量

※後からでも冊数変更できます

ウェブとこの本さえあればすぐできる！！ ActionScriptの新しい勉強法

本書は入門編とチュートリアル編の2部構成になっています。

まず1章で、ActionScriptプログラミングに慣れるところからはじめます。簡単な画像の描画、アニメーションの動きをとおして、ActionScriptの基礎を学びます。

2章では、ActionScript 3.0を学ぶ上で必要になってくるオブジェクト指向プログラミングの概念をおさえた上で、より実践的なテーマにそってプログラミングを学んでいきます。テキストフィールドの扱い、BitmapDataクラスの使い方、より効果的なグラフィック操作が可能なライブラリ「Frocessing」を使った画像の描画、トゥイーンライブラリ「Tweener」を使ったトゥイーンの作成、音声／動画など外部メディアファイルの再生、PicasaやTwitterなど外部Web APIを使ったコンテンツの作成、マイク／カメラとの接続、GainerやArduinoを使って外部デバイスを入出力にしたコンテンツの作成など、Flashでできることのすべてを網羅しています。

入門編は面白法人カヤック、チュートリアルは野中文雄、大重美幸、高輪知明、イズカワタカノブ、村山健、梅原宗士、小林陽介、池田泰延、吉川佳一、小林茂ら豪華執筆陣がサンプルと解説を書き下ろしています。

「wonderfl」上で編集したり、動かしたりして学習できます

ブラウザ上にActionScriptのコードを入力して実行できる環境wonderfl(無料)に、本書のソースコードを収録。Adobe Flashのパッケージがなくても、本書とインターネットさえあれば、その日から ActionScriptが学習できます。プログラミング言語を学習する上でかかせない「ソースコードをちょっといじって実行し、動作の変化を確認する」ことも、本書とwonderflを使えばとても簡単。やりたいことをスムーズに学ぶことができます。

外部APIを使ったマッシュアップも可能

外部のWeb APIと連携するような、wonderfl上だけで完結しないコンテンツの作成も可能です。本書では外部APIとの連携に必要な知識、注意点をわかりやすく解説しています。ぜひ、本書とwonderflを活用して、新しい表現にチャレンジしてください！

刊行記念トークセッションの模様がご覧いただけます

「ブラウザで無料ではじめるActionScript 3.0」の発売を記念して、アップルストア銀座（東京都中央区）にて開催された刊行イベントの模様がビデオでご覧いただけます。

1 章 ActionScript をはじめよう

1-1　wonderfl ではじめよう

Flash とは

ActionScript のバージョン
Flash の開発環境

wonderfl とは

wonderfl を使ってみよう
wonderfl にログイン

コラム：もっともっと！ wonderfl

1-2　ActionScript の基本　―図形の描画―

線を引いてみる
星を描く

変数を使う

複数の星を簡単に描く
機能をまとめる
円を描く　その1
円を描く　その2

三角関数
for 文での処理
繰り返し処理while 文、do while 文

円を描く　その3
円を増やしてみよう

インスタンス
グローバル座標とローカル座標

円をたくさん描いてみよう
ランダムな場所に円を配置してみよう

1-3　インタラクティブな動きを学ぶ

アニメーションを作る

1 フレームごとに移動させる
車を動かしてみよう

マウスの動きを使う

マウスイベント
マウスイベントを使った作例1
マウスイベントを使った作例2
ドラッグする

ループアニメーション

実行されるごとに画面を変化させる
AS で作る概念のタイムライン

非同期処理

1 本のタイムラインを複数に増やす
どんなタイミングで再生がはじまっても成立させる

練習問題

1-4　時計を作ろう

アナログ時計（鳩時計）を作る

コードの全体像
データを読み込む
表示オブジェクトを配置する
時計を設定する
アラーム機能を設定する
時計を管理するクラス
カスタムイベント／ Event のしくみについて
static について

デジタル時計（心電図風の時計）を作る

コードの全体像
配列に座標を保持する
配列の座標を使って描画する
ビットマップエフェクトのしくみ

コラム：あの時計を作ろう

2 章チュートリアルで学ぶActionScript

2-1　オブジェクト指向プログラミング

一般にオブジェクト指向プログラミングとは

コードを構造的にする

ActionScript（Flash）を意識したオブジェクト指向

カプセル化（責任の分担）
継承
ポリフォーズム（交換可能性）

オブジェクト指向のデメリットと使いどころ

2-2　OOP をとり入れたスクリプト設計

プライベートなクラス
イベントリスナーを使ったカスタムイベントの配信

クラスBallFollowingMouse とBall への処理の追加
カスタムイベントBallEvent の定義

get/set アクセサメソッド
メソッドのオーバーライド

Event.toString() メソッドのオーバーライド
Event.clone() メソッドのオーバーライド

完成したクラスBallFollowingMouse とプライベートクラス
プライベートなクラスを使うときの注意

プライベートなクラスはメインクラスの後に初期化される

2-3　テキストフィールド

テキストフィールドを作る

テキストフィールドの縦横サイズ
テキストフィールドの背景色
テキストデータの追加

テキストの書式

テキストフィールドの文字色

テキスト追加を利用したアニメーション
テキスト入力フィールドを作る

入力文字種と最大文字数の制限
入力テキストを★印で表示する

テキストフィールドのスクロール
テキストフィールドにHTML を表示する

フィルタをかける

外部テキストファイルをテキストフィールドに読み込む

2-4　BitmapData

BitmapData への描画

Matrix
ColorTransform
BlendMode

エフェクト

ColorTransform
Filter
DisplacementMapFilter
PerlinNoise

Pixel 操作とパーティクルの描画

ベクトルマップとパーティクルの初期化
ベクトルマップのPixel 値から加速度を算出
BitmapData へのPixel 描画
wonderfl でパーティクル

2-5　Frocessing

Frocessing とは
Frocessing の基本

線のスタイル
線の色
HSV カラーモード
その他の色関数
基本シェイプの描画
rectMode

グラフィックの変形

キャンバスの移動と拡大縮小
キャンバスの回転

曲線の描画
F5BitmapData2D
パーティクルサンプル

コンストラクタ
パーティクルの初期化
描画プログラム

その他のパッケージ

2-6　トゥイーンライブラリ

とりあえず動かしてみる

複数の値を同時に動かす
連続してトゥイーンさせる
トゥイーンを中断させる

拡張機能を使う

フィルターをトゥイーンさせる
色をトゥイーンさせる
ベジェ曲線をトゥイーンさせる
FORK して発展させてみる

2-7　外部メディアファイルの取り扱い

音楽ファイルの再生

Sound_step1：とりあえず再生
Sound_step2：マウスのX 座標でパン
Sound_step3：サウンドビジュアライザ

動画ファイルの再生

Video_step1：とりあえず再生
Video_step2：動画情報取得とちょっとコントロール
Video_step3：動画を使った演出の一例

2-8　外部API との接続

写真を検索して表示する

処理の流れ

XML の取得について

検索結果XML の確認
検索結果XML のロード
XML の解析
namespace
画像のロード
JSON について

データ取得制限（crossdomain.xml）について

許可・不許可について
Security.loadPolicyFile による指定
Security.loadPolicyFile が不要な場合
LoaderContext
自分のサイトにcrossdomain.xml を設置する場合

制限を乗り越えてデータを取得する方法（Yahoo! Pipes）

pageProxy

応用例1：スライドショーを作ってみよう

複数画像のロード
Loader の管理

応用例2：簡易的なモーフィングを作ってみよう

モーフィング表現のしくみ
処理の流れ

ImagePipes にPost でリクエスト
応用例3：Twitter の検索
応用例4：Flickr の利用

Flickr のset を利用

2-9　Flash と外部デバイス

Flash と外部デバイス
ウェブカメラとマイクについて

デバイスの普及率
カメラとマイクについてのプライバシーダイアログ
ウェブカメラやマイクを使ったコンテンツ
ウェブカメラを利用するライブラリ

マイクを使ってみよう

マイクの使い方

作例1：叫ぶとインクが飛び散る

インクの生成
画像の保存

ウェブカメラを使ってみよう

Camera クラスの使い方
キャプチャ映像の反転

作例2：カメラの前の湯気を動いて消す

湯気の消し方
マスクの生成

作例3：ウェブカメラとマイクを使ったFlash の操作
まとめ

2-10　Papervision3D

Papervision3D を使ってみよう

Papervision3D は思っているよりずっと簡単

BasicView

シーン
カメラ
レンダラー / ビューポート

プリミティブとマテリアルを理解しよう
3D オブジェクトに動きをつけよう
3D の視点を変えてみよう
イージングをつけてみよう
応用：サウンドビジュアライザに挑戦

残像効果をつけてみよう

応用：パーティクルエフェクトに挑戦

3D オブジェクトのパーティクルを作成（特に座標などは設定しない）
ダミーの3D オブジェクトを作成する
ダミーオブジェクトの座標を参考にパーティクルをトゥイーンで動かす
ループ処理が走るようにTimer をセット

自分なりの3D 表現にチャレンジしよう

2-11　Flash Player 10 のビルドイン関数

Graphics#drawTriangles で三角形を描画してみる
3 次元座標を投影して2 次元座標を得る
座標を指定して立体を作り、テクスチャを貼る
頂点インデックスを使う
Z ソートを行う
ライティングを行う
主なメソッドの書式 / 引数

Graphics#drawTriangles
Utils3D.projectVectors

2-12　physical × wonderfl

wonderfl でフィジカルコンピューティング

フィジカルコンピューティングとは
ハードウェアで「スケッチ」しよう
physical × wonderfl でできること

ハードウェアの準備

使用するハードウェア
ドライバのインストール

ハードウェアでHello World!（Gainer I/O 編）

電子回路を使って外部デバイスをつなぐ
電子回路の基礎知識
主な電子部品
アナログ出力
アナログ入力

マウスやキーボードを想定したサンプルをフィジカルな入力に変えてみよう

SetPoint フィルタ

Arduino を使ってみよう

Firmata を使用する準備
Funnel Server の起動と確認

physical × wonderfl 用の追加機能
Funnel ライブラリリファレンス

Appendix　wonderfl からFlash へ

wonderfl のコードをFlash IDE で動かす

ファイルの準備
基本設定
外部ライブラリの準備

プライベートなクラスを使うときの注意
ActionScript についての情報源

画像をクリックすると拡大表示いたします。

読者の皆様、ならびに関係者の皆様に深くお詫び申し上げるとともに、この場で訂正させていただきます。

ImagePipesサービス終了に伴うご案内

P.257に記載の「応用例2」について、ImagePipesサービス終了に伴いこのコードが動かなくなりましたので、著者の梅原氏に代替コードをご用意いただきました（顔領域抽出APIをhttp://face.com/に変えてあります）。代替コードは次のURLにございます。　

http://wonderfl.net/c/tJXN

※http://wonderfl.net/book/ → コード 020807 からも確認できます。

●P.61　コード08
【誤】

29. public function DrawCircle1(centerX:int, centerY:int, r:int, color:int) {
（…中略…）
32. // centerX, centerYを中心とする半径nRの円を描く
33. graphics.drawCircle(centerX, centerY, r);

【正】

29. public function DrawCircle1(nX:int, nY:int, nR:int, color:int) {
（…中略…）
32. // nX, nYを中心とする半径nRの円を描く
33. graphics.drawCircle(nX, nY, nR);

●P.62　コード10
【誤】

【正】

29. public function DrawCircle1(nX:int, nY:int, nR:int, color:int) {
（…中略…）
32. // nX, nYを中心とする半径nRの円を描く
33. graphics.drawCircle(nX, nY, nR);

●P.73　コード19のコード番号
【誤】 wonderfl→010311
【正】 wonderfl→010312

●P.85　下から1行め
【誤】 _drawLineクラス
【正】 DrawLineクラス

●P.86　上から3行め
【誤】 _drawLineクラス
【正】 DrawLineクラス

●P.88　本文、上から2行め
【誤】 _live.getListAndDraw
【正】 _line.getListAndDraw

●P.117　本文中段のコード番号
【誤】 wonderfl→020205
【正】 wonderfl→020105

●P.139　コード10のコード番号
【誤】 wonderfl→020202
【正】 wonderfl→020201
※wonderfl→020202でも同じコードが引けるようにしてあります

●P.246　コード06のキャプション
【誤】 Picasaの検索結果をJSONで取得
【正】 Picasaの検索結果（JSON）

●P.247　コード07のキャプション
【誤】 Picasaの検索結果（JSON）
【正】 Picasaの検索結果（JSON）のテキスト内容例

●P.305　本文中段
【誤】 scale値を設定しない場合は図14のaのようになり画一的な表示となりますが、scale値で非表示となる部分を設定することで図14のbのようになります。
【正】 scale値を設定しない場合は図14のbのようになり画一的な表示となりますが、scale値で非表示となる部分を設定することで図14のaのようになります。