.fla 2 ―Idea of Flash Creation―

Flashコンテンツ開発において、何をどう考えて、そのアイデアを形にすればいいのか。本書では、いま旬のクリエイターたちがその気になる制作過程を語ります。FLARToolKitのSaqoosha氏、Sparkproject / BetweenAS3の新藤愛大氏、trick7の寺井周平氏、flapper3 / STDSGNの萩原俊矢氏、Prismgirlの眞野東紗氏&FORM::PROCESSの小瀧和正氏ら、超豪華執筆陣!

定価 4,104円(税込)
判型 B5変型
総ページ数 328
発売日 2009年11月20日
ISBN 978-4-86267-071-7
著者 新藤愛大/寺井周平/萩原俊矢/小山智彦/眞野東紗/小瀧和正

イメージ:.fla 2 ―Idea of Flash Creation―

数量

送料無料

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

販売終了

  • ご利用ガイド
  • 内容
  • 目次
  • 立ち読み
  • お詫びと訂正

ホットなクリエイターたちのちょっとディープなFlash開発!!
作品作りの思考の過程から実際の実装アプローチに至るまで、熱く解説

FLARToolKitのSaqoosha氏、Spark project/BetweenAS3の新藤愛大氏、trick7の寺井周平氏、flapper3/STDSGNの萩原俊矢氏、Prismgirlの眞野東紗氏&FORM::PROCESSの小瀧和正氏ら、いまFlash界を牽引するホットなクリエイターが集結し、おのおの4つのサンプルを制作。その思考の過程から実際の実装アプローチに至るまで、彼ら自身の言葉で熱く解説しています。

本書では、コンセプト出しから実装アプローチ、ブラッシュアップ→フィニッシュまで、実際に個々のクリエイターが形にしていく流れをわかりやすくポイントで解説しています。サンプルのURL、ソースコードは公開されていますから、合わせて読み進めることができます。

Saqoosha氏や新藤氏の最新技術、テクニカルにフォーカスした作品作り、寺井氏の何よりユーザーが使うシーンを重視した作品作り、萩原氏の新しいFlash/ネットの可能性を探る実験的な作品、眞野氏+小瀧氏のテーマとなる世界観を表現する作品。彼らの、発想やアイデア、テクニックからものを作るためのインスピレーションが必ず得られる刺激的な1冊です!

14:Desktop Rainbow ―初めて使うマルチマーカー (Saqoosha)

ウェブカメラなどでマーカーと呼ばれる特殊な図形を撮影すると、あたかもその図形の上に実際にものがあるかのように見える「拡張現実感(Augmented Reality)」。これをFlash上で実現できるのがFLARToolKit。このサンプルでは、FLARToolKitを使ってマルチマーカーを認識し、机の上で“幾重にもリンクする虹”を実現します。

03:DotSound ―音と映像を合わせる(新藤愛大)

演出効果に欠かせない「音」。このサンプルでは、音と映像を同期させたモーションをスクリプト制御で実現しています。リズムに合わせてモーションをつける方法、複数のモーションパターンで効率よく作る方法などを理解することで、独自の表現が可能となります。

目次
  • 01 JellyPics
  • 02 ProgramTree
  • 03 DotSound
  • 04 BetweenAS3
  • 05 For a pair
  • 06 For decision
  • 07 For kids
  • 08 For banner
  • 09 La modification
  • 10 Aquta
  • 11 Yumiura
  • 12 Paint3
  • 13 YuruYurer
  • 14 Desktop Rainbow
  • 15 Whiteboard Sequencer
  • 16 Hiko's Katamari
  • 17 Memento mori
  • 18 Spider web
  • 19 Alice
  • 20 Rain
本書で使用したサンプルソースがご覧いただけます

本書の理解を早めるため、著者のご好意により本書で使用した一部のサンプルソースが、著者関連のコミュニティーでダウンロードできます。

01

JellyPics

・コンセプト


  • 「感触」を与える画面エフェクト

・実装


  • 画像をゆがめる原理
  • ポリゴンとテクスチャ
  • ポリゴンとテクスチャを使った描画
  • マウスのドラッグで画像を歪ませる
  • 慣性を付けて完成
02

ProgramTree

・コンセプト


  • 手段であるプログラムありき
  • コンパイラは何をやっているのか

・実装


  • プログラムの構造を解析する
  • 字句解析
  • 構文解析
  • 構文木の表示
03

DotSound

・コンセプト


  • 音と映像を合わせる

・実装


  • 音をスクリプトで制御する
  • 音楽の流れを知る
  • たくさんのパターンを効率よく作る
04

BetweenAS3

・コンセプト


  • トゥイーンライブラリを作る

・BetweenAS3


  • 柔軟性の秘密
  • トゥイーンの加工をDecoratorパターンで実現
  • パフォーマンスの秘密
  • 強い型指定で高速化
  • ループ処理を軽量化するデータ構造
  • BetweenAS3とメモリ
05

For a pair

・コンセプト


  • 隣の人と仲良くなれるFlashを考える
  • ゲームアイデア

・実装


  • AS2ライブラリを使いつつも.flaらしい制作アプローチ
  • ボールが放物線を描いて往復する部分
  • ボタン操作の部分
  • インタラクションの追加
  • .flaらしさ─タイムラインを活用する
06

For decision

・コンセプト


  • ツールは場所を選ばない
  • 携帯電話で使えるルーレットコンテンツ

・実装


  • AS2ライブラリで何ができるか
  • 扇形を描く
  • カラフルに着色する
  • だんだんとゆっくり関数を実行させる
  • パイの中に番号を入れる
  • 人数設定できるようにする
  • パイを削除する
07

For kids

・コンセプト


  • こどもが喜んでくれるFlashを考える

・実装


  • マイクをインターフェイスとして使う
  • 音声レベルを0から100の数値で取得
  • 取得した音声レベルを建物の高さに反映する
  • コンセプト再考〜実装 ちゃんとこどもが喜ぶか考え直してみる
  • .flaならではの融通
08

For banner

・コンセプト


  • ユーザーに自発的に時間を使ってもらう工夫
  • ユーザーがクリックするときのシナリオを考える
  • ユーザーの気を引くためには?

・実験1


  • そろうかな? と思わせる
  • 想定シナリオ
  • 作例ポイント

・実験2


  • おなじみの“アレ”
  • 想定シナリオ
  • 作例ポイント

・実験3


  • ずれてるとそろえたくなる
  • 想定シナリオ
  • 作例ポイント
  • まとめ
09

La modification

・コンセプト


  • 意識の参照先をどこに置くか
  • マウスとヒトの関係
  • インタラクションの始まりと終わり
  • ハトのメタファー

・実装


  • 映像の動きを数値化する
  • 制作の流れ
10

Aquta

・コンセプト


  • FlashでありながらインターフェイスにはFlashが現れない
  • 処理の流れ
  • 直接Flashと間接Flash

・実装


  • TwitterのつぶやきをアニメーションGIFに書き出す
  • Twitterの検索APIを利用する
  • 表示するアニメーションの処理
  • もう1つの間接Flashの例 ─ Aekleybill.com ─
11

Yumiura

・コンセプト


  • ユーザーの行動を元にランダム関数を作る
  • 偶然とMath.randam()
  • 偶然の閾

・実装


  • 乱数の中に文脈を持たせる
  • 閾の低いランダム関数とは
  • アルゴリズムの代わりにUGC的な手法を使う
  • ちょっと強めの短期インタラクション
  • ダイレクトに更新されるクラスのソースコード
12

Paint3

・コンセプト


  • コンテンツ時間の共有
  • コンテンツと時間軸
  • 擬似同期と真性同期

・実装


  • コンテンツ時間を共有する
  • 描画ログを記録する
  • ログをサーバに保存するために圧縮する
  • 描画ログ(PNGデータ)をサーバに保存する
  • PHPから画像をTumblr APIに投稿
  • “ 擬似同期感”を演出するコツ
  • 保存されるものと保存されないもの
13

YuruYurer

・コンセプト


  • あらゆるものをゆるキャラに
  • どんなしくみ?
  • ドロネー図による自動三角形分割
  • toxiclibsのAS3への移植
  • drawTrianglesメソッドによる画像の変形

・実装


  • ゆるんゆるんにするエフェクト
  • ゆるキャラにしたい画像の加工
  • 物理シミュレーションの設定
  • 物理シミュレーションしながらゆるゆる描画
  • マウスでドラッグさせる
14

Desktop Rainbow

・コンセプト


  • 初めて使うマルチマーカー

・実装


  • 机の上に虹を架ける
  • 虹をモデリングする
  • 複数のマーカーの位置と方向を取得する
  • マーカーの位置から虹の向き・傾き・大きさを計算する
  • 3枚以上のマーカーにも対応させてみる
15

Whiteboard Sequencer

・コンセプト


  • ウェブカメラで遊ぶ

・実装


  • 画面の特定の領域をキャンバスに音を生成する
  • 画像から音を生成する
  • 正面から見た画像を取り出す
  • OSCを使った外部アプリとの連携
  • 設置して遊んでみる
16

Hiko's Katamari

・実装その1


  • Flashで表現する

・実装その2


  • Processingで作ってみる
  • Flashとの違い

・実装その3


  • openFrameworksで作ってみる
  • Flashとの違い
  • まとめ
17

Memento mori

・イントロダクション


  • コンセプト

・Flashサイド


  • プロトタイプ
  • 万華鏡的表現をFlashに落とし込む
  • 万華鏡のパターンを考える

・グラフィックサイド


  • 生と死の2つの世界をグラフィックで表現する
  • 全体
  • Photoshopでの葉っぱの処理
  • プロトタイプのFlashに当て込む
  • 音楽

・Flashサイド


  • トランジション
  • トランジションの追加

・グラフィックサイド


  • 撮影

・Flashサイド


  • フィニッシュ
  • 音楽に合わせてトランジションを変更する
  • プログラム

・グラフィックサイド


  • フィニッシュ
18

Spider web

・イントロダクション


  • コンセプト

・グラフィックサイド


  • グラフィックと音楽
  • 音楽 ─ 270

・Flashサイド


  • 蜘蛛の巣をPapervision3Dで表現
  • Papervision3Dの基礎

・Flashサイド


  • プロトタイプ
  • Spiderクラス

・Flashサイド


  • フィニッシュ

・グラフィックサイド&Flashサイド


  • ブラッシュアップ
  • AIRの書き出し
19

Alice

・イントロダクション


  • コンセプト

・グラフィックサイド


  • グラフィック
  • 2つのシーンの色合い
  • パーツの色合い

・Flashサイド


  • Papervision3Dの応用
  • 2つ世界の動き
  • Papervision3Dでの湾曲表現
  • Papervision3Dの3次元座標を2次元座標に
  • 投影する

・Flashサイド


  • プロトタイプ
  • Dreamクラス(src/Dream.as)
  • Anotherクラス(src/Another.as)

・グラフィックサイド


  • 音楽と撮影
  • 音楽
  • 撮影

・グラフィックサイド


  • フィニッシュ
  • レイアウト

・Flashサイド


  • フィニッシュ
  • Dreamクラス(src/Dream.as)
  • Anotherクラス(src/Another.as)
  • 最後に、再度ブラッシュアップ
20

Rain

・イントロダクション


  • コンセプト

・Flashサイド


  • プロトタイプ
  • Rainクラス(src/Rain.as)

・グラフィックサイド


  • グラフィックと音楽
  • グラフィック
  • 音楽

・Flashサイド


  • フィニッシュ

・グラフィックサイド


  • フィニッシュ

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

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

P.39 fig.6 の 10 行目
【誤】 if (!scanner.getToken().type != '+') {
【正】 if (scanner.getToken().type != '+') {

P.65 fig.11の出力結果表示部分
【誤】

----
Thu Sep 10 01:50:25 GMT+0900 2009
Hello
----


【正】

Thu Sep 10 01:50:25 GMT+0900 2009
----
Hello
----


P.275 fig.10
【誤】 mystage(spiderをassChild)
【正】 mystage(spiderをaddChild)

P.293 fig.9
【誤】 egg child
【正】 eggChild

.fla 2 ―Idea of Flash Creation―

4,104円(税込)/B5変型/328ページ/2009年11月20日

販売終了


関連商品

イメージ:Silverlight2テクニックバイブル

Silverlight2テクニックバイブル

WebデザインのためのSilverlight2

イメージ:徹底図解 インターネット&Webの必須常識100

徹底図解 インターネット&Webの必須常識100

ネットビジネスの新人教育は「これ読んどいて!」で大丈夫。

イメージ:ネットでものを生み出すということ

ネットでものを生み出すということ

電子楽器からプロトタイピングメソッドまで「発想を形にするヒント」

Design Log

WORKS ONLINE BOOK STORE BLOG

CGWORLD.JP

WORKS_TW

CGWJP_TW

CGKENTEI