Progression 3 勉強会 in Osaki

 

12/4(木) Progressionの利用者向け勉強会がありました。場所は大崎のAdobeです。

事例研究2本、Progression 3機能拡張の事例、Progressionを社内勉強会やもっと広い不特定多数に広めて環境を整えるにはどうしたらよいか、CS4対応版の3.1の展望など、利用者には嬉しいネタが盛りだくさんでした。そのレポートです。

お品書き

■アドビ最新動向
今回はFlashだけでなくProgressionの阿部さん(nuimさん)セレクトだったそうです。
■AIRでProgression3を使う
画面遷移をProgression 3に任せ、コマンドの良い部分を活用するデモ
■Progression3 コンポーネントだけでここまでやれる事例
とあるPRサイトの制作事例。コンポーネントでの制作のヒントが一杯
■Progression3のカスタマイズ・機能拡張
Progression 3で視覚的に見えない部分を補うネタや自動シーン生成。Extension Manegerを使った独自機能拡張の話もちらりと。
■Progressionの教え方・普及方法
社内や、ActionScriptのヘビーユーザ以外にもPrgressionを広めるには
■Progression3.1のプレビュー
現在CS3のみ対応のが、CS4発売に合わせてパワーアップ下状態でCS4対応になります。その制作中のネタなど

アドビ最新動向

Adobeの西村さんより

Twitterで話題になってた問題にAdobeの日本法人は問題ないですよーとかから始まる。

■Flashの次世代ファイルフォーマットの読み込みってどうなってるの？

Flashの次世代ファイルは、flaと違ってひとまとまりになった画像(動画を含む)とXMLで構成されるようです。（CS4の時点でFlashのファイルはflaです。次のバージョン以降？）

AfterEffectsで書き出されるXFLは動画をflvで描き出す模様。タイムラインには従来の動画変換同様キーフレームが大量に並びます。アウトプットのクオリティというのは結構問題ながないそう。Flash屋さんにとってはタイムラインがもっとFlashで作ったような感じにモーショントゥイーンになってたりすると泣いて喜ぶ気がしました。

InDesignでの書き出しは、見た感じにはCS3のIllustratorなどからの書き出し並にきれい。テキストに関しては数倍上かもしれない。(AETのおかげのような気もします)

個人的にはそこまできれいになるならFireworksのシンボルを頑張って欲しい…ついでにPhotoshopのスマートオブジェクト/Photoshopのベクトルデータにちゃんと対応して欲しいかも。

■PhotoshopのデータをDreamweaverCS4に持ち込んだときのスマートオブジェクトって便利になる？

質問に対しては後日回答と言うことに。PSDを読み込む場合には、CS3同様ファイルの更新チェックをして更新が必要なら教えてくれる仕様とのこと。あのマークがでることに知らなかったことにショックを受けましたorz でも、一枚画像で管理する日本のWeb屋は極めて少ないと思います。

質問とは別にスキームカービング？技術を使った画像縮小がPhotoshopで簡単に扱えるようになったというデモも。

英語版のトライアルDreamweaver CS4を触った感じでは…その辺りは一押しでなかったし変ってなかったような。CS3以降部分的なコピペで画像ファイル生成とかPSD単位ではすごく扱いやすいのですが。余談ですが、Dreamweaver CS3上で画像を選択した状態で、Photoshopなどがら画像をコピペすると、もとの形式に関係なくJPEG形式で最適化の画面すら出ずに置き換え保存され拡張子は変わらないので要注意。

普段Flashの話題が中心になるので、他の製品の最新情報も聞けて良かったです。

AIRでProgression3を使う

Progressionに画面遷移をに任せ、コマンドの良い部分を活用するデモでした。

演者はgihyo.jpでFlashのフレームワーク「Progression3」を始めてみよう！の連載している楢山(northprint)さんでした。

まずは準備。

Progression 3.0.7では未対応の部分があるので、12/5にアップデートした3.0.8を利用して欲しいとのこと。デモではパッチがあたったProgressionを利用していたそうです。Flash CS3でプロジェクトを作成する過程の後に、FlashDevelop 3(2008/12/05現在beta9)側の設定を行っていました。

AIRで書き出すとき、FlashDevelopの設定のポイントは一つ、preferenceの「swc include libraries」という項目で「arglobal.swc」を選択しておくことだそうです。こうすることによってAIR専用のASクラスの補完が出来るようになるとのこと。

■RSS Readerを作ってみる(AIRで作ったもの)

Progressionを使う上で一番考えるのは、シーンをどう使うか。

シーンは履歴管理に使う。1記事1シーンと考える…Progressionの機能で記事を往復できる

AIR独特のローカルファイルの読み書き機能をカスタムコマンドで実現（ローカルファイルに保存・読み込み）した。

AIRの問題で、どうしてもXMLをいじらないと設定できないことがある。透過・アイコンはXMLファイルを直接編集した。

カスタムコマンドの基本

テンプレートのコマンドを参考に改造を行ったそうで、その際次の二つは押さえておく。

  • _executeメソッドに実行内容を書き作り込んでおけばよい。
  • executeCommand()を書くと、そこで次のコマンドに映る

AIRアプリケーションの動作フローや処理、作業時間など

・閉じるボタンの追加、ネットの接続を確認（ エラー処理を加えておく) -> カスタムコマンドでロード(loadlocal/savelocal)

基本は、通信の有無や、過去のデータ蓄積の有無によってフラグを立てて処理をわける形式。

ざっくりしたものは3時間程度で完了。カスタムコマンドを作ったりして5時間くらい。

■Progression3 コンポーネントだけでここまでやれる事例

オトナの事情によりサイトURLなどの公開はなし。

演者はfumixさん(http://www.la-j.com/) 所属

■まとめるとどんな仕組みのフルFlashサイト？

タイムラインベースのアニメーションを作り込んであり、外部XML->トピックス、画面遷移にPrgressionを用いたコンポーネントを有効活用したサイト。

実際に制作するときは、easycasting.xml作成でサイトの構造を決定し、それぞれの表示要素であるキャストをシンボルで書き出してから（ Progressionシーンエディターの機能）加工開始としていた。

■これが便利だった

InOutMovieコンポーネント

フレームラベルを活用できる。inとstopとoutを予めタイムラインのフレーム名として3つ配置しておく。

in >>stopのフレームはシーンに入ってきたときに再生され、 stop>> outのアニメーションはシーンを移動していくときに再生される。このコンポーネントの良いところは同じキャストが配置されている場合は2重再生をしない。そのため、重複して見えるアニメーションを再生する必要がなくなり、小気味よい演出と速度が実現できる。

InOutMovieコンポーネントは更にasを普通にフレームに書けば実行してくれる。ただし、それ自身はムービークリップなので、ページ切り替えの際にスクリプトを利用したいときには、1フレーム目にstop();をかけておく方が良い。

Progression3のカスタマイズ・機能拡張

複数エフェクトがかけられるけれど、パブリッシュしないとどういう風になるか事前に確認するのは無理？ということから開発が始まったProgressionの補助ツールTransitionGeneratorのお話がメイン。

演者は河村(flabaka)さん

■Progression TransitionGenerator

EffectViewerを作ってみたけれど、大きいしコンポーネントしか使えなさそう。クラスベースにするには、コードをはき出させたいな、クラスとコンポーネントの共通パネルが良いねということから改良したらしいです。

それで出来たTransitionGeneratorの使用方法は次の通り。

  • コンポーネントの場合…エフェクトをかけたいページでTransitionGeneratorを使用してトランジッションのプレビューを見て、OKならステージに配置するボタンをクリックする
  • クラスベースの場合…タイムライン上でTransitionGeneratorを使う。
    プレビュー画面の下のテキストフィールドに使用したインスタンス名を入れるとソースを書き換えてくれる。
    コピーして、希望するクラスのコード中のaddCommand内に追加。importは適切な位置に移動

閑話

コマンドのSerial/pallarelの違い単純カンマ区切りと配列

mxpを割と簡単に作る方法を紹介

■動的にシーンを作成する方法

XMLを読み込んでシーンを作成する。PRMLLoaderを使う利点addSceneFromXMLに比べてシンプル。全シーンを作成したいときに重宝しそう。

PRML形式のXMLの作成（シーンエディタを使うときはEasyCastingモードから切り替えること)

メモ

ファイルは後で配布されるとのこと。

Progression3.1のプレビュー

Progerssionと便利だろうと思いつつも距離を置いてしまう人や、Flash初級者さん達への普及を考える感じ。カナック内の進め方をふまえた上で。

面白法人カヤックの道家さんが演者

教える上での問題

  • スタイルもレベルも違うので一概にフレームワークを押しつけるのは難しい
  • 初級者/中級者/上級者それぞれに違うアプローチが必要じゃない
  • クラスベース/タイムラインベース→作るもの・レベルによってわけた方がわかりやすいんじゃない？

教える上でProgressionの特徴をまとめてみた

  • 機能が充実してくる
  • とりあえず動く
  • 勉強になる
    • 自然と構造設計ができる
    • I/Fのお手本になる
  • サポートが手厚すぎる

欠点。

  • 大きすぎる。
    • 全体像が把握しにくい。
    • 余分なファイルが沢山ある
      →コンパクトに使いたいユーザーがいる
  • 見えない部分で困惑する（ 一部の人たちにとって）

欠点をふまえて。

フレームワークを部分的に使うことを検討しよう。制作者が全部フォローするのは無理なんじゃない？

教える人を増やして、上手に理解してもらおう

さらに、Progressionを機能的なレイヤーにわけてみよう。

  • 基本機能…command（取り出して使えるよ・魅力を感じる人も多いはず） / cast（これもきっと単体で使えるはず） / scene（モードの変換用オブジェクト）
    →基本機能の上にコマンドとかコンポーネントとかがあるんだよ。

カスタム・拡張

組み合わせることで価値を上げる・発展させるという可能性

  • カスタムコマンド
  • カスタムエフェクト
  • カスタムキャスト
  • カスタムコンポーネント

どんどん拡張すると、ex.Slidesライブラリ。easycastingも実際はProgressionの拡張

これから

構造がわかっていれば、部分的に使えるんじゃないか？

カスタムコマンドなど増えて欲しいな！

Progression3.1のプレビュー

現在CS3のみ対応のが、CS4発売に合わせてパワーアップ下状態でCS4対応になるそうです。

制作者のniumさんが演者

以下現在の状態だったり新機能だったり

  • パネルの書き換えを予定。見た目はないけれどJSFLはほぼ仕上がっているいて、アップデート後、CS3/CS4で、Progressionが動く
  • APIを解放したい。
  • 設定ファイルを作ってバッチファイルでプロジェクトが書き出せる方向でいっている(JSFL)
  • プロジェクト書き出しが遅かったので高速化もねらっている。SWCライブラリを使うかどうかがポイント
  • SWCなし…20秒、SWFあり…4秒（ ただしCS4用）コピーするファイルサイズが違う。
  • XMLに掲載してない情報はアラートがでて入力できる。
  • 書き出し先URLの設定が可能。"file:///C|縲・
  • 書き出してないswfへのフォローをつけて、パブリッシュを必ずするかどうかはOFFをデフォルトに
  • 終了後の処理を予め設定しておける。複数走らせるときは終了を選んでおくと良い。
  • 詳細表示…ログ表示を設定しておくと、作成ログがでるようになった。（オートアップデートの時に大変強力）
  • バックアップを作るかどうかを選択できるので、失敗したときの対応が可能。
  • バージョンの確認をしてくれる。各ファイルの修復も可能。
  • 消す処理にはアラートがでるので状況に合わせて選択できる
  • 途中で転けたときには、プロジェクトフォルダ内にログファイルが出来る
裏技的に設定ファイルを書き換えて、クラスプロジェクトをコンポーネントプロジェクトに変更することが出来るそうですが、サポートはしないとのこと。

感想

今回は経験者やActionScriptがしっかりわかる人向けというProgression 3の勉強会ということもあり、良いペースでした。ハンズオンも良いけれどこういうのもいいですね。次も期待してます。

部分的に使用するアプローチとか考えさせられました。それより先にFlashPlayerもう9以降対応で良いじゃん？的なプロジェクトを捕まえなければｗと新たに思ったりもしました。

戻る