:mark: 第一章:CS4でアプリどうしをつなげて効率の良い作業を行おう
:mark: 第二章:Flashのボーンツールを使ってアニメーションを作ろう
:mark: 第三章:Flashで実現させる奥行きのある3D表現を行おう
:mark: 第四章:FireworksとDreamweaverを使ったWebサイト制作のワークフロー
:mark: 第五章:DreamweaverとPhotoshopでメイキングギャラリーを作ろう

「第一章~第五章」に分かれていますが,受講していると「分かれている」という感じはしなかった。
最初の二つはチームリーダの西山氏,あとの三つはDreamweaver,Fireworks,Flash担当の西村氏の講演。

簡単に内容を書くと…

第一章の一つめは,新フォーマットXFLについて。
After EffectsやInDesignで制作したものをXFL形式で書き出して,それをFlashで読み込んで使えるという。
ただし,CS4ではFlashでXFL形式の読み込みはできても書き出しはできない。

二つめはモバイル開発支援Device Central CS4について。
今までは新しい携帯が発売されると2週間ほど時間をおいて,デバイスプロファイルを手動で取得していた。
だが,今回からは自動で,しかも3日ほどで取得できるという。
今のところ携帯サイトは考えていないので,この恩恵を受けるのはもう少しあとになりそうだ。

三つめはDreamweaverの機能強化について。
Flashを組み込むとき,IEのアクティブ化対策のためのSWFObjectが正式採用された。
それに,ユーザー環境のFlash Playerバージョン判定であるExpressInstallが自動的に組み込まれるようになった。
Dreamweaver上でSWFをドラッグ&ドロップで上記二つが自動的に組み込まれる。

第二章では,IllustratorとFlashの紹介。
Illustratorの新機能「マルチプルアートボード」「グラデーションバー」「塗りブラシ」の紹介。
この講演は今回の中で一番よかった。Illustratorを使おうという気にさせてくれた 😉
Flashでは「ボーンツール」の紹介。
クレーンなどの関節的な動きを簡単に作れるようになった。3Dとともに,これは使える機能だと思った。

第三章では,Flashの3D機能とSoundboothとの連携について。
SoundboothはCS4で追加された音源作成・編集用のソフト。CS3のときにはついていなかった。
このあたり特にアピールされていないけど,個人的にはかなり好評価 😀

Flashでは主に3D機能は「3D回転ツール」と「3D変換ツール」の紹介。
何気にPhotoshop PSDファイルからレイヤー構造を保持したままFlashに読み込めるというのが地味に便利かもしれない。
Flash内に読み込んだ音ファイル(拡張子:asnd)を選択し,[Soundboothで編集]を選択するとSoundboothが開くので編集。そうするとFlash内の音ファイルにも反映される。
昔はFlashに限らず,ホームページで音を扱うのは敬遠されていた。重いし,いきなり音が鳴るとビックリする。
しかし,ブロードバンドが普及したり,数々の技術の普及などにより「ホームページで音を扱う」ことについて昔ほど敬遠されることはなくなったように思う。
ただ,やはりむやみやたらに使うものではない。
使いどころを間違えるとユーザー離れにつながりかねない。
逆に,効果的に使えるならば絶大なインパクトを与えられるとオレは思う。

第四章ではFireworksとDreamweaverの連携について。
個人的にはCS4で一番進化したのはFireworksだと思っている。
リンクを保持したままPDF化,ValidなXHTML,CSS書き出し,ピクセル管理の充実…などの機能追加・強化により,サイトデザインソフトとしての地位を確立したのではないだろうか。
書き出した(X)HTMLファイルをDreamweaverで開いて細かな修正を加える。
CSS書き出し機能については若干不備があるらしく,Adobe Developer ConnectionというサイトのFireworksデベロッパーセンター内にFireworks CS4での標準規格に準拠したWebデザインの作成という記事があり,CSS書き出し強化の拡張機能が公開されている。興味がある人はこの記事を読みつつ実際にサンプルを作ってみると良いだろう。

最初は単純な構造のもので作って,何がどう対応しているのかをしっかり認識する必要がある。
※プロパティ名やレイヤー名がそのままクラス名として使われるため。
共有ライブラリを使用すると,メニューリンクの作成など,より高度な編集が可能になる。

このCSS書き出し機能は非常に便利だが,使いこなすまでがかなり大変そうだ…。
バリバリ使いこなせるようになれば,制作時間の短縮は大いに期待できる。

第五章ではDreamweaverとPhotoshopの連携。
この二つの組み合わせはあまりなじみがないと思うのはおれだけだろうか?
オレは今のところあまり写真を使わないからなじみがないと感じるのか…。

CS4の新機能として,Dreamweaverに直接Photoshop PSDファイルを読み込み,その後,PSDファイルが修正・更新された場合に,Dreamweaverステージ上の画像ファイルにアラートが表示される。
そして[オリジナルから更新]ボタンを押すだけで画像ファイルの更新が行なわれる。
つまり,わざわざPSDファイルを再読み込みさせずに画像ファイルの更新が完了する。

さらに,Dreamweaverでは[ライブビュー]と[ライブコード]という機能が追加。
Dreamweaver本体にWebkitというレンダリングエンジンを搭載しているので,わざわざブラウザーを起動せずにDreamweaver内で表示確認が行なえるという優れ機能 😀
ちなみにこのWebkitというレンダリングエンジンはSafariやGoogle Chromeが採用しているエンジン。
[ライブコード]はJavaScriptの動的な動きを視覚的に追跡できるという機能。
JavaScriptはブラウザー上には反映されるが,ソースには反映されていないため動きが把握しづらかった。
[ライブコード]という機能によりこの問題が解決。
Ajaxが普及している現在,この[ライブコード]は重宝されるではないだろうか?
数多くのJavaScriptライブラリが出回っており,DOMを利用して動的にHTMLを書き換えている。
表示上は問題ないが,開発者側からするとスタイルを変えたい場合,「どのタイミングでclassやidが設定されているのか?」「このタグにはどんなclassやidが設定されているのか?」ということがわかりづらかった。
今まではJavaScriptライブラリのソースをトレースして該当箇所を見つけて,classやidを特定しCSSを修正していた。
だが,[ライブコード]によりソースをトレースすることなくひと目で該当箇所を見つけることができる。
CS3から搭載されているSpryだが,CS3ではちょっと貧弱なイメージがあったが,CS4ではこれを払拭。
簡単にAjaxサイトが作れるようになった。

他に,バージョン管理ソフトである「Subversion」を正式採用。

オレとしては西山氏の講演がわかりやすかった。
西村氏はなんか急いでいるようなイメージがあった。そんなに時間がおしている雰囲気ではなかったのだが。

最後に,FlexとFlash Catalystの紹介があって終了。

少しずつ自分の進めべき方向性が見え始めてきた一日だった。

会場を出るときにアンケートを回収。
希望者にはCS4 Web Premiumの体験版がプレゼントされる。
来場者にはこの日のデモCDが配られる。

最初は「すでにCS4持ってるしなぁ」と思っていたが,

「そうだ 💡 Mac版をもらおう!」

と思い,Mac版の体験版をもらってきました 😎
30日間の無料体験版なので,インストール時期に非常に慎重になります(笑)

投稿者 Kunikatsu

『プログラマ的Webクリエイター/デザイナー』 1998年-プログラマとして社会人デビュー。 2001年-バンド活動に本腰を入れるためフリーターになる。 その間にWEBに興味を惹かれて独学で学ぶ。 2008年-フリーター生活に終止符。WEBRAINSという個人事業を立ち上げる。 このサイトは個人事業とは別であり,至極プライベートなネタを発信。

関連投稿

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

見逃しています