2010.5.30 「FLASH○○入門」

2010.5.30 「FLASH○○入門」 [Edit]

最終更新日：2013.07.02

demo1「iPhoneアプリ入門」　SIHO
demo2「デザイナーのためのFlash（＋Progression 4）入門」　道家陽介
 demo3「WonderflではじめるFlash 3D入門」　池田泰延

当日には、130人のご参加をいただきました。ありがとうございました！

セミナーへ参加した方のトラックバックはこちらの記事にお願いします。

demo1:iPhoneアプリ入門覚えておきたい10のこと

講師 SIHO

viva mambo, inc.のディレクター SIHOさんに、iPhoneアプリの開発をはじめる段階でのひととおりの流れ、気をつけることなどを140ページのスライドとともに詳しく紹介していただいました。

当日のスライド・動画についてはこちらから詳しい内容をご覧ください。

その1 英語だらけ

登録から公開まですべて英語だらけなので、くじけないようにがんばりましょう。

その2 Developer登録

とても長いデベロッパー登録の手順について全て解説していただきました。登録はすべて英語で入力する必用があります。

すでに登録されたApple IDで登録しようとすると日本語でひっかかるので、新規にApple IDを作るとよい

その3 XCodeでHelloWorld!

iPhoneSDKをダウンロードして、XCodeでHelloWord!を表示するまでを説明していただきました。

その4 証明書(CSR)を作成

キーチェーンアクセスを使っての証明書作成の手順を説明していただきました。

デベロッパー登録した法人英名はスペースなどすべて一致するように気をつける

その5 Provisioning Profileの作成

手持ちのiPhoneのIDを登録し、Provisioning Profileを作成する手順を説明していただきました。

ここでのHOW TOは説明が古いものを対象にしているので気をつける
開発用にワイルドカードをもったIDを登録しておくと、とりあえずテストしたいときに使い回すことができる

その6 Provisioning Profileを使って実機テスト

その5で作成しダウンロードしたProvisioning Profileを使っての実機テストの手順を説明していただきました。

その7 パッケージ化に必用なもの

アイコンや起動画面を開発中のアプリへ登録から、実機にて確認した様子を説明いただきました。

その8 iPhone Dev Centerで書類作成

iPhone Dev Centerで書類を作成し、作成中のアプリに登録する手順を説明いただきました。

その9 app storeへ掲載申請

iTunes Connectからのapp storeへの掲載申請の手順について説明いただきました。

アプリケーションの登録は削除できないので注意して登録することをおすすめ
Developer Guide に日本語の PDF (124ページ)が配布されている。わかりやすいので必見
販売タイミングを調整したい場合には、Availibity Date に1ヶ月くらい先の日付を登録しておいてからあとで日付を調整すると良い

その10 Objective-Cを学ぶ

Objective-Cを本格的に学ぶためにおすすめな書籍やウェブサイトについてや、勉強会、ActionScriptふうにObjective-Cを書くためのライブラリなどを紹介いただきました。

番外 FlashCS5でモック作成

FlashCS5でのモック作成から実機テストへのながれを説明いただきました。

まとめ

開発についてはFlashCS5でモックを作成してからXcode/Objective-Cで実装すると良いのではないでしょうか、とのことでした。

demo2:デザイナーのためのFlash（＋Progression 4）入門

講師：道家陽介

ブラウザ上でActionScriptを書いてFlashを作れるWebサービス「wonderfl」を開発・運営している面白法人Kayacの道家さんに、あるキャンペーンサイトの制作を実例に、制作の現場からヒントを見つけ、Progressionのようなツールを使って楽しく制作をすることのについてお話していただきました。

当日のスライドこちらからご覧ください。スライド

制作の現場からヒントを見つける

制作は、遅れないスケジュール、手戻りがないスケジュールはないという前提で進める必要がある。

企画が決まってから実装に入るまで期間が長い

実装に入るまでの間に企画書パワーポイントを素材として、Flashのモックアップを作成してしまう。
Progressionを使えば3時間ぐらいで作成できる。
実装前にモックアップで、ムリないか、間違いないかを確認できる。
不安がある時はまず作ってみた方が速い。

Progressionの利用

Progressionはhttp://progression.jp/からダウンロードして、インストールする。
コンポーネントスタイルを利用すると簡単にFlashを作ることができる。
Progressionの機能を閉じ込めたコンポーネントをシンボルに置くだけで、機能をつけることができる。
FlashでProgressionを利用することにより、簡単にパワーポイント + アルファ的なものを作ることができる。
シーンの切り替わりをうまくつくることができる。

細かいところは先に作る

面倒なところだけつくれば、Progressionがもっと面倒なシーン遷移などの設定をやってくれる。
ボタンなど細かい部品から作り込んで、もっと面倒なところはProgressionにおまかせできる。
スクリプトベースで巨大なサイトができるようになったからこそ、アニメーションなど細かい作り込みで差別化できる。
制作初期の元気で気力のある時に細かい演出を作り込んで、後でシーンなどの調整をするといいものができると思われる。

イレギュラーな制作方法を編み出す

デザインする段階からFlashで作れば、シミュレーションとして精度が高いものができる。
精度が高いシミュレーションができれば、出戻りが減る。
Progressionを使えば、スクリプトが分からなくてもFlashでシミュレーションを作ることができる。
Flashを持っているディレクターが、Progressionを使って自分で作ってみるのもいい。
動くプレゼン資料は伝わりやすいので、そのような資料作成にProgressionを利用できる。

まとめ

誰かが何かをしている間に何ができるのかを考える。
Progressionのようなツールを使って、企画が立ち上がった段階でモックアップを作り、先手を打つ。
必要なツールがなければ作る。
個人でもチームでもやり方を進化させることで、いいものを作る時間がうまれる。

道家氏が作ったツール

Photoshopの各レイヤーをPNGファイルに書き出すツール。
Photoshopのオブジェクトを、Flashに同じ座標で配置するツール。
Flashに配置したPNGをムービークリップに変換するツール。

demo3:wonderflではじめるFlash 3D入門

講師：池田泰延

フリーランスのフラッシュデベロッパー・テクニカルライターであり、ブログ「Clockmaker Blog」、wonderflギャラリーサイト「Beautifl」の運営、またwonderflの常連でもある池田さんに、Webサービスのwonderflを使った3Dコンテンツ制作について語っていただきました。

今回の資料は池田さんのブログでアップされています。 F-siteでの発表資料「wonderflではじめるFlash 3D入門」

Flashで3D

ゲーム、シミュレーション、ユーザーインターフェース、グラフィックなどに利用されている

Flashで3Dを作るためには

1.タイムライン
2.ムービー作成ソフトから書き出したものをそのまま使う
3.スクリプト（AS3）で実装

スクリプトで3Dを扱うには

ネイティブ3D
Papervision3Dなど既存ライブラリを使う
自作3Dエンジンを使う

Flashの3DライブラリはPapervision3D、Alternativa3D、Away3Dなど様々ある
3Dライブラリを使う事で、コンテンツの中身だけを制作することが可能

ライブコーディング

Webサービスのwonderflを使って、講義中に実際にライブコーディングをしていただきました。まずは、Papervision3Dで球体が回るデモがありました。

wondrflは無償でオンライン上でActionScript3を使い、Flashを投稿できるサービスです。ライブラリのパスがすでに設定されていたり、参考になるコードがいくつもあるので、非常に勉強になるそうです。

[F-site] Sample 01 - Circle

また無償のActionScriptエディターであるFlashDevelop:FlashDevelop]]（[[日本語版はこちら）の紹介もありました。 FlashDevelopを使うとコードヒントが出たり、wonderflに投稿する下準備として使うこともできたりするので、とても便利だそうです。

ここでFlashDevelopを使って100個の立方体をつくり、カメラでそれをまわりから見るデモを作成。

[F-site] Sample 02 - Papervision3D

またこれまで池田さんが投稿された作品も紹介いただきました。

3Dライブラリの比較

Papervision3D 一番多く使われている
Alternativa3D 正確にポリゴンを表示できる
Away3D 高機能
Away3D Lite Away3Dの機能限定版。その代わりに実行速度が速い

ここで実行速度の比較デモがありました。 Away3D Lite > Papervision3D > Away3D > Alternativa3D の順で速かったです。

しかし、実行速度だけでライブラリを決めるのではなく、ポリゴン欠けがあるかないかや、ゆがみのあるなしなど、ライブラリの特性も考慮して、実制作で使うライブラリを決めるとよいとのことでした。

また、池田さんは現在オープンソースのライブラリのCross3Dを開発中とのこと。 Cross3DはAS3 の各種 3D エンジンを同じソースコードで動作させるためのブリッジライブラリだそうです。

3Dの学習方法

学習内容

AS3の知識
3Dの各知識（3次元座標、プリミティブマテリアル、カメラ、モデリングデータの読み込み）
2Dのインターフェースとの連携
シーン遷移
メモリ管理／パフォーマンスの最適化

上級技の紹介として、トゥイーンライブラリを使ってスクリプトでモーションをつけたり、BitmapDataを使った高速化チューニングなどをあげられました。

数学的な知識

三角関数（円運動などでよく使う）
行列（BitmapDataのキャプチャに役立つ）

wonderflで学習

wonderflを通じた学習のまとめとして

wonderflに投稿
twitterでできたものを発表して、フォロアーたちとわいわいする
Questionタグをつけると、forkして助けてくれることも

またブログを書いて勉強メモを残すとモチベーション維持にもつながるとのことでした。

じゃんけん大会

今回も関係者、参加者の皆様からプレゼントをご提供いただきました。たくさんの賞品、ありがとうございました。

鈴木麻里子様より

『iPhone仕事便利帳 1台を使い倒す300の活用法』

（株）エクスナレッジ様より

『Flash3Dコンテンツ制作のためのPapervision3D 入門』

（株）Adobe様より

『CS5 ノベルティグッズ各種』

（株）オーム社様より

『FLASHアニメーション制作バイブル』

JaGraプロフェッショナルDTP&Webスクール様より

『3万円以下の講座受講権×1名様』

二次会

今回も西新宿の「北海道」にて行われました。おいしい料理とお酒でFlash談義にが大いに盛り上がりました！

レポート作成: 松本慶一郎、堀江真治、前田タスク
写真: 桜井和貴、森脇裕也、堀江真治、鈴木順二

（敬称略）

F-site