Adobe CS4 Web Premium セミナーレポート
"最高傑作へのショートカット"
今月号の記事
アドビでは 2008年12月に発売を開始した Adobe CS4 Web Premium のプロモーションとして、2月下旬に東京・大阪・福岡の3ヵ所で「最高傑作へのショートカット」と題した無料セミナーを開催しました。各会場ともたいへん盛況のうちに幕を閉じましたが、今回 Edge では、当日のセミナー内容をイベントレポートとしてお届けします。ご参加頂けなかった皆さんに、少しでも当日の模様をお届けできればと思います。
なお、今回のセミナーで使用したデモ素材は、特設サイト「Adobe CS4 わたしたちが届けたいコト」にて提供させて頂いています。こちらは、株式会社ピクルス様、株式会社クスール様をアドバイザーにお招きし、Adobe CS4 Web Premium を利用するメリットを実際の制作現場の視点でピックアップして頂いたものです。セミナーにご参加頂けなかった皆さんも、どうぞ本レポートとあわせてご覧下さい。
アドビの Web 戦略紹介
マーケティング本部 クリエイティブソリューション部 Web グループ グループリーダーの西山正一が登壇し、Adobe Flash Player と Adobe AIR の普及率の紹介から始まりました。ネットワークに接続されていない PC も含め、Flash Player 7 のインストールされている PC は既に99%に到達し、最新の Flash Player 10 についても、正式リリースからわずか2ヵ月で約60%を達成しています。これには、ワンクリックで最新版の Flash Player にアップデートが行える ExpressInstall が大きく寄与しているのではないかと考えられ、この機能は Dreamweaver CS4 に標準搭載されています。
最新の Flash Player の普及率についての詳細は、以下のサイトに掲載されておりますのであわせてご覧下さい。
Adobe AIR については、発表から1年足らずで既にインストール数が1億を超えているとし、猛烈な勢いで普及していることが伺えます。
Flash Lite 搭載非 PC デバイスの世界累計出荷台数
また、Flash Lite 搭載の非 PC デバイスが2008年9月末の時点で世界累積出荷8億台を突破し、2009年中には10億台を突破するとみられ、これは当初予想の1年前倒しの広がりを見せています。
このような大きな普及率を誇る Flash Player と Adobe AIR ですが、今後はさらにライセンス料の廃止や Flash についての技術情報の無償公開を行い、Flash Lite と PC 上の Flash Player との機能差異をなくした新しい Flash Player を、2010年を目処にリリースする予定です。これによって、PC、携帯電話、家電などのあらゆる機器上で同じように Flash の再生が可能になります。アドビではこの計画を「Open Screen Project」と名付け、今後ますます推進していきます。
Adobe CS4 Web Premium でわたしたちが届けたいコト
西山の残りの持ち時間は、Adobe CS4 Web Premium の新機能紹介となりました。
1. アプリケーション連携により、作業効率が向上！
新しい XFL ファイルフォーマットサポート
After Effects CS4 と InDesign CS4 には XFL 書き出し機能が追加されました。XFL は、今後 Flash が使用する標準の保存形式で、現在の FLA 形式に代わるものです。タイムラインやレイヤーなどを維持した状態で After Effects の素材をそのまま Flash に取り込むことができます。
Device Central CS4
Flash に同梱されている Device Central CS4 にはオンラインライブラリ機能が追加されました。これまで定期的にダウンロード公開されていたプロファイルデータが、ツールから直接入手できるようになりました。これによって、デバイスリリースとほぼ同時期にプロファイルの入手が行えます。また、マクロによるテストの自動化や複数デバイスへの同時テストが行えるようになった他、テスト内容をムービーとして書き出す機能が追加されました。ここでもプレゼンテーション等の資料作成の効率化が図られています。
Dreamweaver CS4
デザインビューとコードビューの位置を上下だけでなく左右にも配置できるようになりました。また、WebKit を内蔵することでドキュメントウィンドウ上で JavaScript の実行が可能です。swf ファイルをデザインビュー上にドラッグするだけで、ExpressInstall に必要なタグを自動的に書き込んでくれるようになり、これまでの swf ファイルの取り扱いがより効率的に行われるようになりました。
セミナーで紹介された After Effects、DeviceCentral、Dreamweaver を使用したデモ内容については、以下のサイトにも掲載されています。
2. Flash CS4 のボーンツールを利用した強力なアニメーション
「ブラシ」ツールと「塗りブラシ」ツールの描画の違い
Illustrator CS4
１つのファイル内に複数のアートボード（マルチプルアートボード）を設定できるようになり、アートボード単位で PDF に書き出す等の作業が容易に行えるようになりました。また、アートボード上でグラデーションを直接操作できるようになり、グラデーション塗りの変形や回転も行えるようになりました。その他、「塗りブラシツール」が新たに追加されたことによって、これまでのパスの概念にとらわれることなく、直感的な描画が可能になりました。
Flash CS4
Flash CS4 ではこれまでのパラパラ漫画のようなタイムラインベースのアニメーションからオブジェクトベースのアニメーションになりました。また、ボーンツールを使った IK アニメーションの作成が容易に行え、さらにプロパティウィンドウのアーマチャーのオプション設定を「実行時」に変更するだけで、ActionScript のコーディングを一切行うことなく Flash Player 再生時にランタイムで実行される IK アニメーションを作成することができます。
セミナーで紹介された Illustrator と Flash を使用したデモ内容については、以下のサイトにも掲載されています。
3. Flash CS4 で奥行きのある 3D 表現を実現
休憩を挟み、マーケティング本部 クリエイティブソリューション部 Web グループフィールドマーケティングマネージャー 西村真里子が登壇。引き続き各製品の新機能を紹介しました。
Flash CS4
まずはツール、プロパティウィンドウ、パネル類が右側に集められた UI の変更についてです。これまでは、1つのツールで描画を行う際にも、分散したパネルの間を行き来して設定を行う必要がありましたが、右側に集約することでマウスの移動距離を極力抑え、作業効率の向上を図っています。そして、検索ウィンドウや登録されている項目を複数選択してプロパティを一括変更できるようになった「ライブラリ」パネル、あらかじめ登録されているシンボルはもちろん、自分で作ったシンボルを使ってステージや特定のシンボルの塗りとして描画可能な「パターン描画」ツール、左右対称のオブジェクトを描画する「対象ブラシ」ツールを紹介しました。
その他、ボーンツールを使ったシェイプの変形、AIR 1.5 の書き出しや外部ライブラリ、swc を設定できるようになったパブリッシュ設定、タイムライン上で容易に 3D 効果を設定できる「3D 変換」「3D 変形」の各ツールなどを紹介しました。
Soundbooth CS4
CS4 より Web Premium 製品として加わったSoundbooth ですが、マルチトラックの編集機能や無償で使用可能な多数のサウンドエフェクトが追加されています。また、Flash がアドビサウンドドキュメント形式（asnd）をサポートしたことで、Flash のライブラリから直接 Soundbooth を起動させて音声ファイルを変更できるようになりました。
セミナーで紹介した Flash CS4 と Soundbooth CS4 との連携については、以下のサイトをご覧下さい。
4. Fireworks CS4 と Dreamweaver CS4 を利用した効率のよいワークフロー
Fireworks CS4
Web 制作現場のワークフローでは、
- クライアントへの提案
- 案件発注決定
- Web 制作開始
というフェーズがあります。クライアントへの提案書を作る際には、プレゼンテーションツールを利用し、発注決定した際に、Adobe のクリエイティブプロツールを使う方が多く、複数のツールを使い分けなければならないという現状を認識しました。クライアントとの折衝やプレゼンテーションの必要性から、Photoshop や Illustrator で作成したデザインをいったん PowerPoint にする。お心当たりの方も多いのではないでしょうか。アドビからの提案ですが、PowerPoint の代わりに Fireworks CS4、そして、Fireworks CS4 から新たに追加された PDF 書き出し機能を使っては如何でしょうか。Fireworks CS4 には、このようなワークフローを補助する新しい機能が多数追加されています。また、the Edge newsletter でも Fireworks CS4 を使った新しいワークフローの事例を紹介しましたので、そちらもあわせてご覧下さい。
Fireworks CS4 ではじめる PDF ワークフロー
その他、カンバス上で Shift キーを押しながら操作することで、そのピクセルサイズが表示される「ガイド機能」、「ものさしツール」を 使って各ピクセル位置をグラフィックとして描画する機能、「共有ライブラリ」にあらかじめ用意されたモックアップ用の素材やアイ コンの紹介、Photoshop や Illustrator ファイルの互換性の強化などが紹介されました。
Fireworks と Dreamweaver を使った Web サイト制作のワークフロー
5. Dreamweaver CS4 と Photoshop CS4 でメイキングフォトギャラリーをラクラク作成
Dreamweaver CS4
ここで再び Dreamweaver です。他のアドビ製品と同様のアドビ共通インターフェースの採用、左右分割可能なコードビュー、WebKit によるライブビューとライブコード、編集中のファイルに関連した書類が自動的に開かれる「関連ファイル」、現在選択しているオブジェクトに関連するコードへ自動的にジャンプできる「コードナビゲータ」を紹介しました。また、これまで XML データの作成の時点で難しかった Spry データセットは、テーブルとして組まれた HTML をデータとして読み込んで利用できるようになりました。その他、日本でご要望の多かった Subversion のサポートや、Photoshop との同期したイメージの編集機能等が紹介されました。
Photoshop CS4
数多くの新機能が搭載されている Photoshop CS4 ですが、本セミナーでは Web での実作業に関連した新機能に絞って紹介しました。まずは Web 用に写真データを加工する際に必要となる「色調補正」パネルです。Photoshop CS4 では色調補正についての機能がすべて1つのパネル内に集約されています。これによって、クリック１つで色調補正レイヤーが追加され、必要な調節が簡単に行えるようになっています。また、画像データを下絵にしてペンタブレットを使って描画を行う際に、作業が行いやすいように非破壊で画像データを回転させることができるようになりました。その他、ピクセル等倍の画像編集や、カラーユニバーサルデザイン向けに「P型」「D型」といった色弱特性に則した新しい色校正モードを紹介しました。
セミナーで紹介した Dreamweaver と Photoshop の連携によるサイト制作については以下のサイトをご覧下さい。
Dreamweaver と Photoshop でメイキングフォトギャラリーを作ろう
なお、アドビでは Dreamweaver CS4 と Flash CS4 による新しいワークフローのご提案として、別途 PDFとしてその新機能を図表入りで解説しています。そちらもあわせてご覧下さい。
最高のWebへのショートカット
DREAMWEAVER CS4 FLASH CS4 PROFESSIONAL 注目の新機能をチェック！
検証：Webワークフローはこう変わる
アドビの新 Flash Platform
休憩を挟み、西村とディベロッパーマーケティングスペシャリストの轟啓介が登壇。まず始めに、最新の Flash Player 10 の機能をふんだんに使った作品事例の紹介を行いました。セミナーで紹介されたサイトの多くは the Edge newsletter でも紹介されたサイトです。各制作会社様によるサイト制作の裏話や技術情報等を掲載しておりますので、是非ご覧下さい。
- 世界初、Flash Player10 採用の大規模キャンペーン「TOYOTA iQ」サイト
- wonderfl：サイト上で Flash を作成できる！ActionScript を勉強できる！
- INTERNAVI REALIZATION：Honda の純正カーナビ「インターナビ」が収集した位置情報を、Flash Player 10 でビジュアライズ！
- BOW cARd: 名刺の情報をWebカメラで読み取りアバター化
次に轟より、これまでの RIA（リッチインターネットアプリケーション）の変遷と Adobe Flash Platform 戦略の概要を紹介しました。コンピュータの世界は、メインフレームからクライアント&サーバ型へ移行し、さらにブラウザを用いることで誰もが容易にデータにアクセスできるようになりました。RIA は、サーバに逐一問い合わせることなく、クライアント上でアニメーション効果などを付けた状態で分かりやすく画面の表示を行う技術です。
アドビではこの Flash をコアとした新しい RIA 体験を提供する環境を Adobe Flash Platform と名付けました。クライアント上におけるアドビの RIA 実行環境が Flash Player、そして Adobe AIR になります。OS やブラウザの違いに関係なく、1つのコンテンツがすべての機器上で動作し、さらに Flash が進化することで、付随する RIA 環境も進化し、それを構築するアプリケーションも提供されていきます。また、開発者向けとして Flex Framework を提供することで、コーディングによって効率的な RIA 構築が可能となっています。この RIA 環境を強力にサポートする製品群が下図の下側に配置されているサーバ製品です。Flash Media Server や Blaze DS DataService による効率的なデータ配信を実現します。
Adobe Flash Platform アーキテクチャの構成図
そして最後に、Adobe Flash Platform 戦略の中心を担うことになるであろう Flash Catalyst によるデモの実演を行いました。Flash Catalyst は以前 Thermo と呼ばれていたデザイナー向け UI 構築ツールです。PSD ファイル、AI ファイル、そして Fireworks PNG ファイルを Flex Builder に読み込み可能な FXG 形式に変換し、アプリケーション上で一切のコーディングを行わずにインタラクション効果の設定を行うことができます。
Flash Catalyst の「ようこそ」画面
デモでは Photoshop で作成したデザイン画を Flash Catalyst で直接開き、ボタンをクリックすると別レイヤーにある地図が表示されるというものでした。
Flash Catalyst の、「ボタン」にインタラクションを設定するダイアログ
自動的に生成されるコードは、プルダウンメニューでウィンドウを切り替えて内容を確認できる
ボタン画像のある Photoshop のレイヤーを「ボタン」に変更し、インタラクションの前と後を選択して効果を設定するという非常にシンプルなものでしたが、いとも簡単に設定できる様子には会場の皆様も驚きを隠せないようでした。Flash Catalyst の正式リリースは1年後を予定していますが、その前に Adobe Labs にてベータ版の公開を予定しています。また、Adobe Flash Catalyst Team のページにもご注目下さい。
さて、可能な限り当日の模様を余すところなくレポートさせて頂いたつもりですが如何だったでしょうか。セミナー内容は大変濃いもので、うっかり見逃してしまった方も多かったのではないかと思います。今回アドビとして初めて、セミナーで紹介した内容の要点はすべて特設サイト「Adobe CS4わたしたちが届けたいコト」にてムービーとサンプルファイルをあわせて提供するという試みに挑戦してみました。セミナーの参加前にあらかじめ予習し、セミナーの後で復習もできる。また、各ムービーにはブログ用貼り付けタグを提供しておりますので、参加された方のブログの投稿を見て、当日参加できなかった方にも必要な情報はご覧頂ける。このサイトも活用し、更に多くの方に CS4 製品の新機能、作業効率をあげる改善ポイントを体感いただければ幸いです。
