Fireworks、FlashおよびDreamweaverを使用した簡単なインタラクティブコンテンツの作成
作成日
16 February 2009
ページ ツール |
必要条件
この記事に必要な予備知識
このチュートリアルは、Adobe CS4製品を使用したWeb制作ワークフローを習得しようとしている初級レベルのユーザを対象としています。
ユーザーレベル
初級
必要な製品
- Fireworks CS4 (Download trial)
- Flash Professional CS4 (Download trial)
- Dreamweaver CS4 (Download trial)
サンプルファイル
- cs4_project.zip (11468 KB)
- cs4_project_completed.zip (24562 KB)
このチュートリアルでは、Double Identityという架空の映画のWebサイトで使用する簡単なプロモーション用Webページを作成します。このページは、ページ上部のインタラクティ ブSWFヘッダ（図１）と、レイアウトを埋める補足のテキストで構成されます。作業を進めながら、Adobe CS4製品のワークフローの概要を示し、モックアップやインタラクティブコンテンツの作成に関する基本的な事項を説明します。
図１に示したモックアップは、このチュートリアルの中心的な部分です。まず、Adobe Photoshop、Adobe IllustratorおよびAdobe Soundboothで、提供するメディアアセットを収集します。次に、Adobe Fireworksでヘッダのモックアップを作成し、そのモックアップをAdobe Flash Professionalでインタラクティブムービーに変換します。最後に、Adobe Dreamweaverで最終的なサイトのファイルを生成すると共に、ファイルの編集に関するいくつかの注意事項を示します。
このチュートリアルを終了すると、CS4のワークフローに従って、独自のプロジェクトを作成するのに必要な知識を得ることができます。このチュートリアルの所要時間は、約１時間30分です。
作業の開始
プロジェクトを開始するときには、まず、白紙を用意してアイデアの概略を描くことをお勧めします。メモや走り書きを追加したり、不適切な項目に線を引いて消したりしながら、全体的な方向性を把握します。次に、必要なレイアウトを生成したり、モチベーションを引き出したりするために必要なアセットのリストを作成します。計画を開始するためにできることをすべて行います。
このチュートリアルでは、視覚的なアセットとコンテンツが、整理されたソースファイルのコレクションとして用意されています。ここでは、プロジェクト構造を設定し、モックアップの作成に使用するアセットについて理解できるように説明します。
プロジェクト構造の設定
プロジェクトを開始する際に、ファイル編成について検討する時間を取ることをお勧めします。操作するファイルには、ソースファイルとパブリッシュしたファイルの２つの種類があります。ソースファイルは編集可能なマスターファイルで、サイトを構築および編集するために使用します。パブリッシュしたファイルはソースファイルを書き出したバージョンで、サポートファイルと共にWebページのコンテンツで使用されます。パブリッシュしたファイルのみがインターネット上のサーバにアップロードされます。
チュートリアル用のサンプルファイルを設定します。
- CS4_Project.zipファイルをダウンロードし、内容をコンピュータのデスクトップまたはその他のフォルダに展開します。
- CS4_Projectフォルダを開きます。このプロジェクトフォルダには、_Sourceという名前のサブフォルダがあります。_Sourceフォルダには、製品ごとに分かれたチュートリアルのサンプルファイルが含まれています（図２）。これ以降の手順でモックアップおよびソースファイルを作成する際に、これらのアセットを参照します。
CS4_Projectフォルダは、すべてのパブリッシュしたファイルと_Sourceフォルダが格納される、プロジェクトのルートフォルダとして機能します。作業時には、_Sourceフォルダにソースファイルを保存し、CS4_Projectフォルダにパブリッシュしたファイルを保存します。サイトが完成したら、ルートフォルダにあるすべてのファイル（_Sourceフォルダ内のファイルを除く）をサーバにアップロードします。
サンプルファイルについて
このチュートリアルで用意されているメディアアセットには、画像、オーディオ、テキストの３つの種類があります。
コンピュータ画像には、一般的にベクトルとビットマップの２つの形式があります。ベクトル画像は、線と点でシェイプを定義する数式によって生成されます。ベクトル画像は解像度に依存せず、通常、ファイルサイズはビットマップ画像よりも小さくなります。ビットマップ画像は、集まって画像を表すカラーピクセルのグリッドで構成され、グリッド内のピクセル数が多くなるほど、解像度も高くなります。ビットマップ画像はファイルサイズが大きくなる傾向がありますが、複雑な写真のようなコンテンツを表すのに適しています。CS4のワークフローでは、Photoshopを使用してビットマップ画像を処理し、Illustratorを使用してベクトルコンテンツを描画および編集します。
オーディオは一般的に、非圧縮オーディオとしてはWAV（Windows）形式またはAIFF （Mac OS）形式が使用され、圧縮オーディオとしてはMP3形式が使用されます。CS4のワークフローでは、新しいSoundboothサウンド（ASND）形式を使用して編集可能なオーディオソースファイルを作成します。これによって、「Soundbooth CS4で編集」オプションからSoundboothを起動して、ラウンドトリップ編集を行うことができます。Soundboothでファイルを保存したら、Flashに戻り、ファイルを読み込んで置換することなく、更新されたサウンドを聞くことができます。
サンプルファイルのコンテキストおよびサンプルファイルの作成に使用したツールについては、次のセクションを参照してください。
Photoshop CS4製品ツアー
Photoshopは、幅広い用途に使用される強力な画像編集ツールです。印刷業界では、Photoshopは一般的に高解像度の画像編集および画像制作に使用されます。Web業界では、Photoshopは一般的に複雑な画像合成、写真の操作および画像の修復に使用されます。CS4プロジェクトのワークフローでは、Photoshopはさまざまなビットマップ画像アセットの生成に使用されます。このアセットはPhotoshopソースファイル（PSD）で編集できますが、ソースファイルのポストプロダクションでの修正用に、統合された画像形式（JPG、PNGなど）に書き出すこともできます。
Photoshopで背景画像を確認するには、次の手順を実行します。
- サンプルファイルのCS4_Project/_Source/Photoshopフォルダにあるcity_background.psdファイルを開きます。
- 図３に示されているワークスペースの主な要素を確認します。ワークスペースの要素には、左側のツールパネル、カンバス上部のオプションバー、右側のカラーパネル、調整パネルおよびレイヤーパネルがあります。
- レイヤーパネルに注目します。レイヤー効果と描画モードによる画像の合成は、Webページのグラフィックに関するPhotoshopの強力な機能の１つです。
- 調整パネルのアイコンをクリックして、画像がどのように変化するか試してみます。
Photoshopの使用方法について詳しくは、『Adobe Photoshop CS4ユーザガイド』を参照してください。
Illustrator CS4製品ツアー
Illustratorは、ハイエンドのベクトルグラフィック編集ツールで、ロゴ、テキストレイアウトおよび複雑なイラストレーションコンテンツの作成に広く使用されています。ベクトルコンテンツを使用してデザインすることによって、編集可能な状態を保ちながら、高解像度または低解像度の環境でグラフィックを使用できます。プロジェクトのワークフローでは、Illustratorを使用して、インタラクティブなヘッダのレイアウトに使用するロゴ、キャッチフレーズのテキストおよび名前のテキストを生成します。ベクトルグラフィックは他の場所で使用した場合でもそのまま編集できますが、編集を行うにはIllustratorソースファイル（AI）が適しています。
Illustratorでロゴ画像を確認するには、次の手順を実行します。
- ダウンロードしたサンプルファイルのCS4_Project/_Source/Illustratorフォルダにあるlogo.aiファイルを開きます。
- 図４に示されているワークスペースの主な要素を確認します。ワークスペースの要素には、左側のツールパネル、アートボード上部のオプションバー、右側のカラーパネル、変形パネルおよびレイヤーパネルがあります。
- Illustratorでベクトルを描画するためのペンツールは、他の描画プログラムのペンツールよりも大きな役割を果たす中心的なユーティリティです。ペンツールを使用して、点や線を描画してみます。
ヒント：クリックして点を追加したときに、ペンツールをドラッグすると、ベジェパスの曲線を曲げることができます。
Illustratorの使用方法について詳しくは、『Adobe Illustrator CS4ユーザガイド』を参照してください。
Soundbooth CS4製品ツアー
Soundboothは、Flashで使用するオーディオを簡単に録音および編集できるように設計されたオーディオ編集および作成ツールです。Soundboothでは、オーディオを非圧縮形式で録音し、多くの種類の圧縮ファイルにオーディオを書き出すことができます。Soundbooth CS4の新機能として、Soundboothサウンド（ASND）形式を使用して編集するときには、作業内容のスナップショットを保存できます。また、Soundbooth CS4には、マルチトラックASNDファイルを作成する新機能もあります（図５）。CS4プロジェクトのワークフローでは、Soundboothを使用して、サウンドトラックオーディオをASND形式で生成および編集します。
Soundboothでサウンドトラックファイルを確認するには、次の手順を実行します。
- ダウンロードしたサンプルファイルのCS4_Project/_Source/Soundboothフォルダにあるsoundtrack.asndファイルを開きます。
- 画面は左右に分かれており、左側にはファイルパネル、タスクパネルおよびヒストリパネルが表示され、右側には波形編集ビューが表示されます（図５）。
- 編集コントロールを操作してみます。ワークスペースにはマルチトラックが表示されます。小さい方のサウンドエフェクトを別の時点に移動してみます。ファイル内の要素のタイミングを変更することはとても簡単です。
- プロジェクトのサウンドスコアおよびエフェクトを作成するために使用できるオンラインリソースを確認するには、「Resource Central」タブをクリックします。
Soundboothの使用方法について詳しくは、『Adobe Soundbooth CS4ユーザガイド』を参照してください。
最後にもう１つ重要な点は、すべてのソースファイルとパブリッシュしたファイルを、Creative Suite 4と共にインストールされるAdobe Bridgeで管理できるということです。Bridgeはファイルブラウザとメディアマネージャの機能を持っており、プロジェクト間でファイルを検索したり、ファイルを管理したりするために使用できます。特に興味深いのは、よりわかりやすい検索のためにメタデータを利用してコンテンツにタグを付ける機能と、Adobe Version CueとAdobe Device Centralを利用して同期する機能です。Bridgeの使用方法について詳しくは、『Adobe Bridge/Adobe Version Cue CS4 ユーザガイド』を参照してください。
これで概要の説明は終わりです。次のセクションでは、Fireworks、FlashおよびDreamweaverについて説明します。
Fireworksでのモックアップのビルド
モックアップは、制作の準備ができたアートワークを承認し、ワークフローの次のステップに配布するために使用されるWebページまたはWebページの要素のグラフィック表現です。Fireworksは、Photoshop、Illustrator、DreamweaverおよびFlashと密接に統合されているので、モックアップの作成に最適なツールです。Fireworksを使用してサンプルファイルをレイアウトすることによって、モックアップをFlashに渡してさらに編集したり、直接Dreamweaverに渡して実装したりすることが簡単にできます。
ここでは、Fireworksでアセットを組み合わせて、Webページのヘッダグラフィックのモックアップを作成する方法を説明します。また、Flashでの制作用にページを準備する方法についても説明します。
Fireworks CS4製品ツアー
Fireworksは、ベクトルコンテンツとビットマップコンテンツの両方を使用してWebページのグラフィックやWebサイトのモックアップを作成できるように設計されたグラフィック編集およびWeb制作ツールです。また、Fireworksには、JavaScriptドリブンなWebページや、Adobe Flash Player用のインタラクティブなSWFベースのコンテンツを制作するために使用できるさまざまな機能も含まれています。CS4プロジェクトのワークフローでは、FireworksはWebページのモックアップを生成するためのステージング領域として機能します。
サンプルファイルから静的なレイアウトを組み立てて、Fireworksソースファイル（PNG）形式でファイル構造を構成します。Fireworks PNG形式のファイルをFlashに読み込んで、アニメーションやインタラクティビティを追加できるレイアウトを作成できます。
Fireworksのワークスペースを確認するには、次の手順を実行します。
- Fireworksを開き、新しいファイルを作成します（ファイル／新規作成）。
- 新規ドキュメントダイアログボックスで、幅の値を725に、高さの値を320に設定します。「カスタム」オプションを選択して、カンバスの色を黒に設定します。「OK」をクリックします。
- ワークスペースの主な要素を確認します。ワークスペースの要素には、ツールパネル、カンバス領域、最適化パネル、レイヤーパネル、プロパティインスペクタパネルがあります。
- 「レイヤー」タブ（ページパネルと共にグループ化されている）をクリックしてレイヤーパネルを確認します。
Fireworksの使用方法について詳しくは、『Adobe Fireworks CS4ユーザガイド』を参照してください。
グラフィックの読み込みとレイヤーの設定
プロジェクトの作業は、適切な構造のPNGソースファイルを作成することから始めます。コンテンツのレイヤー名と配置は、次のセクションのFlashソースファイルにコピーされます。次の工程を考えて、自然にインタラクティブな開発環境に変換される単純な方法でモックアップを構築します。
この実習の目標は、Background、Cars、DetailsおよびTextの４つのレイヤーでコンテンツを構成することです。後で、Carsレイヤーのビットマップをアニメーション化します。これらのビットマップをBackgroundレイヤーやDetailレイヤーから分離することによって、Flashでの作業が少し簡単になります。また、テキスト項目は頻繁に編集される可能性があるので、独自のレイヤーに分離することをお勧めします。
レイヤーを作成し、グラフィックを読み込むには、次の手順を実行します。
- 前の手順で作成したファイルをpromo_header.pngという名前で、_Sourceフォルダに保存します。
- レイヤーパネルで「Layer 1」をダブルクリックし、名前をBackgroundに変更します。
- ファイル／読み込みを選択して、CS4_Project/_Source/Photoshopフォルダにあるcity_background.psdファイルを読み込みます。Photoshopファイル読み込みオプションダイアログボックスで、「コメント」テキストボックスの下のポップアップメニューから「Photoshopレイヤーを１つの画像に統合」を選択します。「OK」をクリックします。
- 背景の左上隅にカーソルを置いて、カンバス上で画像を配置する場所をクリックします。画像を選択した状態で、プロパティインスペクタでx座標とy座標が 0,0（カンバスの左上）に設定されていることを確認します。レイヤーパネルで「Bitmap」をダブルクリックし、画像の名前をcityに変更します（画像に具体的な名前を付けると、他の場所に書き出したときにファイルを認識しやすくすることができます）。
- レイヤーパネルの下部にある新規レイヤーアイコン（図６）をクリックして、新規レイヤーを作成します。レイヤーの名前をCarsに設定します。Fireworksでは、レイヤーはレイヤーパネル内のフォルダで表され、その中に任意の数のビットマップオブジェクトやベクトルオブジェクトが格納されます。ここで作成したレイヤーは、Flash Professional環境に読み込んだときにレイヤーフォルダに変換されます。
- ファイル／読み込みを選択し、同じ設定を使用してCS4_Project/_Source/Photoshopフォルダにあるcar_1.psdファイルを読み込みます。画面の中央下に自動車を配置します。ツールパネルの「選択」セクションから拡大・縮小ツール（Q）を選択し、自動車をクリックして選択します。選択ハンドルをドラッグし、プロパティインスペクタに示されているように、自動車のサイズを幅が約250ピクセルになるまで縮小します。ビットマップラベル名をcar-leftに変更します。Fireworksによって、選択したレイヤー（この場合は、Carsレイヤー）のレイヤーフォルダにオブジェクトが読み込まれます。
- カンバス上で自動車の画像をコピー＆ペーストして複製します。コピーした画像をカンバスの右側にドラッグし、変更／変形／水平方向に反転を選択して画像を水平方向に反転します。反転した画像を元の画像の約１インチ右側に配置します。レイヤーの名前をcar-rightに変更します。
- CS4_Project/_Source/Photoshopフォルダにあるcar_2.psdファイルを読み込み、最初の自動車に合わせてサイズを変更します。カンバス上で２つの画像の間に新しい画像を配置します。ビットマップレイヤー名をcar-middleに変更します。
- Carsレイヤーの手前に新規レイヤーを作成し、名前をTextに設定します。ここに３つのIllustratorファイルからアートワークを追加します。
- ファイル／読み込みを選択して、CS4_Project/_Source/Illustratorフォルダにあるlogo.aiファイルを読み込みます。ベクトルファイルオプションダイアログボックスでデフォルトのオプションを使用します。「OK」をクリックします。
- 背景の左上にカーソルを置いて、カンバス上で画像を配置する場所をクリックします。拡大・縮小ツールでロゴの画像を選択し、幅が約250ピクセルになるように調整します。レイヤーの名前をlogoに変更します。
- CS4_Project/_Source/Illustratorフォルダにあるtagline.aiファイルを読み込み、画面中央の自動車の上に配置します。キャッチフレーズのテキストを選択した状態で、ツールパネルのカラーの塗りスウォッチをクリックし、明るいカラーを選択します。パレットから白を選択するか、カンバス上の画像にポインタを合わせて写真からカラーをサンプリングします。レイヤーの名前をtaglineに変更します。
- CS4_Project/_Source/Illustratorフォルダにあるnames.aiファイルを読み込み、キャッチフレーズのテキストの右側に名前のテキストを配置します。テキストの塗りを明るいカラーに設定し、レイヤーの名前をmarkとwendyに変更します。
- Detailsという名前の新規レイヤーを作成し、このレイヤーをTextレイヤーとCarsレイヤーの間にドラッグします。
- CS4_Project/_Source/Photoshopフォルダにあるmark_sousa.psdファイルとwendy_carter.psdファイルを読み込み、レイヤーの名前をwendy-imageとmark-imageに変更します。図７に、完成したモックアップを示します。
- ファイルを保存します。
アートワークの追加によるモックアップの完成
モックアップの基本的な部分は完成しましたが、Fireworksの描画ツールを使用して追加のデザイン要素を作成し、最終的な修正を加えます。長方形ツールを使用して、プロフィール画像の周囲にアウトラインを描画し、背景への透明なグラデーションを追加して、テキストと画像を型抜きします。
グラフィックレイアウトを完成させるには、次の手順を実行します。
- Detailsレイヤーでの作業を続けます。長方形ツールを選択し、塗りのカラーをカラーなし（赤のスラッシュが表示されているスウォッチアイコン）に、アウトラインのカラーを白またはライトグレーに設定します。各プロフィール画像の周囲の長方形をドラッグして境界線を追加します。長方形はビットマップ画像の端にスナップされます。長方形のサイズは、拡大・縮小ツールを使用するか、プロパティインスペクタの幅と高さのテキストボックスを使用して、手動で変更することもできます。
- 選択ツールを選択し、カンバスのグレーの領域をクリックしてすべてのオブジェクトの選択を解除します。ツールパネルで長方形ツールを選択し、塗りのスウォッチカラーを黒に、アウトラインのスウォッチカラーをカラーなしに設定します。明るいカラーのテキストの後ろに、高さが約60ピクセルで、カンバスと同じ幅の長方形を描画します。プロパティインスペクタで不透明度スライダ（「フィルタ」オプションの上にある）をクリックし、シェイプの透明度を50%に下げます。テキストが見やすくなるように長方形を配置します（図８）。
- ファイルを保存します。
Flash用のPNGファイルの準備
Fireworksの優れている点の１つは、FlashやDreamweaverで使用したり、直接展開したりできるコンテンツを書き出す機能です。この場合、PNGファイル自体を使用して、モックアップの構造をFlashソースファイルに渡すことができます。このセクションを終了する前に、ベクトルロゴを単一のビットマップオブジェクトにラスタライズして、ファイルを簡素化します。複雑なベクトルグラフィックは軽量ですが、Flash Playerでのレンダリングのパフォーマンスは低下します。複雑なベクトルが編集可能である必要がない場合は、シェイプをビットマップに変換することをお勧めします。
Flashでさらに制作作業を行うためのPNGファイルを準備するには、次の手順を実行します。
- 選択ツールを選択し、カンバス上のロゴをクリックして選択します。
- 変更／選択範囲を統合を選択して、ベクトル画像をビットマップ画像に変換します。
- ファイルを保存します。これで、Fireworksで最初のモックアップが完成しました。
- Fireworksは終了してもかまいません。後で、PNGファイルの編集が必要になった場合は、もう一度Fireworksを開きます。
モックアップのトピックについて詳しくは、「Mocking up text with the Lorem Ipsum placeholder text generator*」を参照してください。
Flashでのサウンドとインタラクティビティの追加
サウンドやアニメーションは、Webページのレイアウトを魅力的なものにし、一般的にヘッダグラフィックや補助的なページ要素で使用されます。Fireworks PNGファイルの読み込みのサポートと、Flash CS4のアニメーションワークフローの機能強化によって、アニメーション化されたレイアウトをこれまでよりも簡単に作成できるようになりました。また、Soundbooth CS4ワークフローの機能強化により、Flashでのオーディオの操作が柔軟になり、わかりやすくなっています。
ここでは、Fireworksで作成したヘッダグラフィックのモックアップに、サウンド、アニメーションおよびインタラクティビティを追加する方法を説明します。
Flash CS4 Professional製品ツアー
Flashは、ビジュアルな開発環境を使用してFlash Player用のコンテンツを作成するためのツールです。Flashは、Webバナー、Webページ要素、Webページ全体およびWebアプリケーション全体を作成するデザイナーや開発者によって使用されます。このCS4プロジェクトのワークフローでは、Flashを使用して、Fireworksのモックアップを、ボタン、サウンドおよびアニメーションを含むインタラクティブなヘッダグラフィックに変換します。編集可能なソースファイル（FLA）を作成し、次のセクションでDreamweaverで使用するためのSWFをパブリッシュします。
Flashのワークスペースを確認するには、次の手順を実行します。
- Flashを開きます。
- ファイル／新規を選択して、新しいファイルを作成します。新規ドキュメントダイアログボックスで、「Flash ファイル（AS 3.0）」を選択します。「OK」をクリックします。
- ワークスペースの主な要素を確認します。ワークスペースの要素には、ステージ、タイムラインパネル、プロパティパネル、ライブラリパネルおよびツールパネルがあります（図９）。
- 「ライブラリ」タブをクリックしてライブラリパネルを確認します。ライブラリは、シンボルおよびメディアオブジェクトとして再利用可能なアセットを格納するために使用されます。
Flashの使用方法について詳しくは、『Adobe Flash CS4 Professionalユーザガイド』を参照してください。
FLAファイルの作成とパブリッシュ設定
FLAファイルを作成するときには、ファイルに関連するパブリッシュ設定のプロパティを調整します。パブリッシュ設定では、書き出すファイルの種類やSWFファイルのオプションを制御します。ここでは、HTMLファイルをパブリッシュするデフォルトの動作を無効にし、パブリッシュされるSWFを書き出す場所を変更します。
新しいファイルに対して次の手順を実行します。
- 前の手順で作成したFLAファイルをpromo_header.flaという名前で、CS4_Project/_Sourceフォルダに保存します。
- 修正／ドキュメントを選択し、ステージのサイズとカラーを更新します。ドキュメントプロパティダイアログボックスで、幅の値を725に、高さの値を320に設定し、Fireworksのモックアップを読み込んだときに正しくステージに整列されるようにします。「背景色」のスウォッチをクリックして、背景色を黒に変更します。「OK」をクリックします。
- ファイル／パブリッシュ設定を選択し、パブリッシュ設定ダイアログボックスを開き、パブリッシュ設定のプロパティを更新します（図10）。「形式」タブの「HTML」チェックボックスをオフにします。DreamweaverでHTMLページを作成するので、デフォルトのHTMLテンプレートを書き出す必要はありません。「Flashファイル」テキストボックスの横にあるフォルダアイコンをクリックし、SWFファイルのパブリッシュ先の場所を変更します。保存先フォルダの選択ダイアログボックスで、CS4_Projectフォルダ（１つ上のフォルダ）に移動します。「保存」ボタンをクリックします。
- 「Flash」タブのその他のオプションも確認した後、「OK」をクリックします。
- ファイルを保存します。
ヒント： Flash Player 9以降では、機能が強化された新しいActionScript 3.0形式がサポートされています。Flash Player 9よりも前のバージョンのFlash Playerを使用するユーザを対象としている場合以外は、ActionScript 3.0形式を選択してください。
ムービークリップシンボルへのFireworksモックアップの読み込み
FLAファイルでのレイヤーの操作は、他のプログラムでのレイヤーの操作と同じです。ただし、FLAファイルの場合、レイヤーは個別のレイヤーパネルではなく、タイムラインパネルの一部です。FLAファイルのレイヤーを使用すると、タイムラインの複数のフレームにまたがって作業するときに、コンテンツのレイアウトを制御できます。
Flashでは、コンテンツを構成するためのコンテナとしてタイムラインを使用します。多くの場合、FLAファイルを開いたときに表示されるメインタイムラインに沿って作業するか、またはライブラリ内のシンボルのタイムラインで作業します。シンボルは、それぞれが個別のタイムライン、編集領域およびレイヤーのセットを持つ再利用可能なオブジェクトです。シンボルを作成してコンテンツをグループ化したり、アニメーションを作成したり、ボタンなどを作成したりします。
FLAファイルに必要な構造は、Fireworks PNGファイル内に既に作成されています。PNGをFlashに読み込むときに、Fireworksコンテンツをメインタイムラインに読み込むか、またはムービークリップシンボルのタイムライン内に配置するかを選択できます。メインタイムラインに沿って作業することも可能ですが、通常、ムービークリップのタイムラインの方が柔軟に作業できます。Fireworksモックアップをムービークリップに読み込むことによって、レイヤー構造が保持され、保存されている内容からすぐに作業を始めることができます。
Fireworksモックアップを読み込んで、FLAファイルを構成するには、次の手順を実行します。
- タイムラインパネルでレイヤー名をダブルクリックし、メインタイムラインのレイヤー１の名前をAssetsに変更します。
- ファイル／読み込み／ステージに読み込みを選択して、CS4_Project/_Sourceフォルダにあるpromo_header.pngファイルを読み込みます。Fireworksドキュメントの読み込みダイアログボックスで、読み込み先ポップアップメニューから「現在のフレームをムービークリップとして」を選択します。「オブジェクト」の選択項目を「ビットマップとして読み込み、外観を保持する」に設定します。「テキスト」オプションを「すべてのテキストを編集可能に保持する」に設定します。「OK」をクリックします。
- タイムラインのフレーム１に黒い点（キーフレームと呼ばれる）が表示され、グラフィックがそのフレームのレイヤーに表示されることを示します。PNGファイルをムービークリップとして読み込んだので、作成済みのレイヤー構造はムービークリップのタイムラインに配置されます。現在表示されているのは、フレーム１のムービークリップインスタンスの外側です。ステージ上のグラフィックをダブルクリックして、ムービークリップのタイムライン内に入ります。タイムラインビューが変更され、タイムライン上部の編集バーにシーン１（メインタイムライン）の編集モードを終了し、現在シンボルのタイムラインのページ１を編集中であることが示されます。メインタイムラインに戻るには、編集バーでシーン１のリンクをクリックします。タイムライン内を移動するには、通常、ステージ上のインスタンスをクリックするか、ライブラリパネル内のシンボルをダブルクリックします。
- ライブラリパネルに配置されているアセットに注目します。読み込んだアセットが表示されるまで、Fireworks Objectsフォルダとサブフォルダを開きます（図11）。
- ファイルを保存します。
メモ：Fireworksで別の方法でレイヤーを設定した場合、レイヤー構造の表示が異なる場合があります。Flashのタイムラインでレイヤーおよびレイヤーフォルダをドラッグして、コンテンツを目的の位置に配置できます。
ムービークリップのタイムラインに沿ったアニメーションの作成
Flash CS4 Professionalでは、強化されたアニメーションワークフローを使用して、時間経過と共にオブジェクトを簡単に移動および変形できます。最も一般的なアニメーションの形式はモーショントゥイーンと呼ばれます。モーショントゥイーンでは、アニメーションの始点と終点にあるオブジェクトの特性を定義します。Flash Playerによって残りの処理が行われ、中間のアニメーションが作成されます。
この実習では、遠くから前進してくる自動車のアニメーションを作成します。これを行うには、それぞれの自動車のグラフィックをムービークリップシンボルに変換する必要があります。
シンボルを作成し、それぞれの自動車のグラフィックのモーショントゥイーンを作成するには、次の手順を実行します。
- ページ１シンボルのタイムラインが表示されていない場合は、メインタイムラインでインスタンスをダブルクリックするか、ライブラリ内でページ１シンボルをダブルクリックして、シンボルのタイムラインを表示します。
- 最上位レイヤーのフレーム35をクリックし、下へドラッグしてフレームのすべてのレイヤーを選択して、すべてのレイヤーをフレーム35まで拡張します。選択範囲を右クリックまたはCtrlキーを押しながらクリックし、「フレームを挿入」（F5）を選択します。アニメーションを追加する前にタイムラインを拡張することによって、すべてのレイヤーのフレーム数が同じになり、グラフィックがアニメーションのすべてのフレームを通じて表示されるようになります。
- レイヤースタックの上にある目玉のアイコンをクリックして、すべてのレイヤーを非表示にします。ステージにXが表示され、グラフィックは表示されなくなります。
- cityレイヤーとcar-middleレイヤーでXを選択解除して、これらのレイヤーでグラフィックを表示します。錠前のアイコンをクリックして、cityレイヤーをロックします。
ヒント：選択しようとしているグラフィック以外のグラフィックも選択してしまうことがよくあります。各レイヤーについてロック機能と非表示機能を使用することによって、この問題を回避することができます。
- ツールパネルの選択ツール（黒い矢印）を選択し、中央の自動車のグラフィックをクリックして選択します。修正／シンボルに変換（F8）を選択して、オブジェクトをシンボルに変換します。シンボルに変換ダイアログボックスで、シンボル名としてCar-Middleを指定し、タイプをムービークリップに、基準点を左上または中央に設定します。基準点は、パスに沿ったトゥイーンでオブジェクトの方向に影響します。左上または中央のオプションは、最も一般的な設定です。「OK」をクリックします。ライブラリパネルにシンボルが表示されます。
- これで、トゥイーンを作成する準備ができました。car-middleレイヤーのフレーム１でキーフレーム（黒い点）を右クリックまたはCtrlキーを押しながらクリックし、「モーショントゥイーンを作成」を選択します。
- タイムラインのフレーム35をクリックするか、赤い現在のフレームインジケータをタイムラインの最後までドラッグして、再生ヘッドをフレーム35に移動します。
- 自由変形（Q）ツール（ツールパネルの上から３番目のツール）をクリックし、自動車のグラフィックをクリックして選択します。画像を約50%に縮小します。
- 自動車を選択したままの状態で、上方向の少し右に移動します。これにより、単に拡大するのではなく、自動車がよりリアルに動いているように見えます。
- 現在のフレームインジケータを左右にドラッグしてタイムラインをスクラブし、トゥイーンをプレビューします。フレーム１またはフレーム35に戻って、アニメーションの各キーフレームの位置とプロパティを編集できます。
- トゥイーンの最初のキーフレームを右クリックまたはCtrlキーを押しながらクリックし、「キーフレームを反転」を選択して、トゥイーンを反転します。これで、自動車が手前に動いてくるようなリアルな表示のトゥイーンが作成されました。
- 手順４～10を繰り返して、左側の自動車のアニメーションを作成します。最初に、car-leftレイヤーを表示します。画像を選択し、シンボルに変換します。２番目のアニメーションが完成したら、右側の自動車についても同じ処理を繰り返します。左側と右側の自動車の開始キーフレームを移動して、フレーム１の後で表示されるようにしてみます。これを行うには、キーフレーム上にポインタを置いて、両方向矢印のカーソルを表示します。このカーソルが表示されたら、キーフレームをクリックし、タイムライン上の別の時点にドラッグします。３つの自動車のそれぞれについて、モーショントゥイーンアニメーションが作成されたタイムラインについては、図12を参照してください。
- SWFを書き出してムービーをプレビューするには、制御／ムービープレビューを選択します。
SWFはFLAファイルの上に表示されるので、ムービーをプレビューできます。また、アニメーションは終了することなくループ再生されます。これは、ActionScriptの単純な停止アクションを使用して明示的に停止するように指示しない限り、タイムラインはループ再生されるからです。
ヒント：デフォルトでは、非表示のレイヤーはSWFファイルには書き出されません。SWFを書き出すときにすべてのグラフィックが表示されるようにするには、FLAファイルですべてのレイヤーを表示します。
- タイムラインに停止アクションを追加するには、Textフォルダを選択し、挿入／タイムライン／新規レイヤーを選択して、レイヤースタックの一番上に新規レイヤーを追加します。レイヤーの名前をActionsに変更します。
- タイムラインに追加するすべてのアイテムは、レイヤーのキーフレームに追加する必要があります。停止アクションが論理的には最後のフレームで実行される必要があることを考えると、Actionsレイヤーのフレーム35をクリックし、F6キーを押してキーフレームを追加する必要があります。アクションを含むキーフレームは任意のレイヤーに配置できますが、レイヤースタックの一番上に配置されたActionScript専用のレイヤーを使用することをお勧めします。
- 新しいキーフレームが選択された状態で、アクションパネルを開き（F9）、テキストエディタに次のActionScriptコマンドを入力します。
stop();
- もう一度「ムービープレビュー」コマンドを実行し、アニメーションが１回だけ再生されることを確認します。
- ファイルを保存します。
ヒント：アニメーションをさらに修正および調整するには、トゥイーンオブジェクトが選択された状態でモーションエディタパネルを使用します。
モーショントゥイーンの作成に関するその他のチュートリアルについては、「モーショントゥイーンの作成: Part 1」を参照してください。
ユーザインタラクティビティのボタンの作成
ユーザインタラクティビティを作成する最も簡単な方法の１つは、ページにボタンを追加することです。ボタンサンプルライブラリに含まれる作成済みのボタンを使用することも、ボタンシンボルを使用してカスタムボタンを作成することもできます。何か処理を実行するようにボタンを設定するには、ボタンインスタンスに名前を付けた後、ボタンのクリックイベントをキャッチする単純なActionScriptを追加します。以下の手順では、ヘッダムービーに３つのボタンを追加します。
ボタンサンプルライブラリを使用して再生ボタンを追加するには、次の手順を実行します。
- ムービーに再生ボタンをすばやく簡単に追加するには、ボタンサンプルライブラリを使用します。ウィンドウ／サンプルライブラリ／ボタンを選択して、ボタンサンプルライブラリを開きます。
- メインタイムラインでインスタンスをダブルクリックするか、ライブラリ内でシンボルをダブルクリックして、ページ１シンボルのタイムラインに戻ります。
- Buttonsという名前の新規レイヤーを作成し、このレイヤーをActionsレイヤーの下に配置します。
- タイムラインでButtonsレイヤーを選択した状態で、ボタンサンプルライブラリのclassic buttons/Circle ButtonsフォルダにあるPlayボタンを選択し、ステージにドラッグします。ボタンシンボルがFLAファイルのライブラリにコピーされます。
- ステージ上のボタンインスタンスを選択し、左下隅に配置します。インスタンスを選択した状態で、プロパティインスペクタの「<インスタンス名>」テキストボックスにplay_btnと入力します。この名前は、ActionScriptでこのボタンを参照するために使用します。
- Actionsレイヤーのフレーム１にボタンに関連するコードを追加します。Actionsレイヤーのフレーム１で空白のキーフレームを選択し、アクションパネルを開きます。以下のコードを入力します。
function playClickHandler(event:MouseEvent):void
{
gotoAndPlay(2);
}
play_btn.addEventListener(MouseEvent.CLICK, playClickHandler);
- 制御／ムービープレビューをもう一度選択して、アニメーションが１回だけ再生されることを確認します。再生ボタンをクリックして、アニメーションがもう一度再生されることを確認します。
- ファイルを保存します。
俳優名のテキストからカスタムボタンを作成するには、次の手順を実行します。
- 独自のカスタムボタンも同じ手順で作成しますが、最初にグラフィックをボタンシンボルに変換する点が異なります。ステージ上のMark Sousaというテキストを選択し、F8キーを押してシンボルに変換します。シンボルに変換ダイアログボックスで、「名前」テキストボックスの内容をMarkBtnに変更し、タイプメニューから「ボタン」を選択します。「OK」をクリックします。
- これで、作業対象のボタンが作成されました。ボタンを選択した状態で、プロパティインスペクタでインスタンス名としてmark_btnと入力します。
- ボタンインスタンスをダブルクリックして、ボタンインスタンスのタイムライン編集モードに変更します。ボタンシンボルのタイムラインは通常のタイムラインと表示が異なり、最初の４つのフレームはボタンの状態（アップ、オーバー、ダウンおよびヒット）を表します（図13）。
- デフォルトのレイヤーでオーバーフレームをクリックし、F6キーを押してキーフレームを追加します。アップフレーム上のグラフィックが複製されます。オーバーフレームでテキストを選択し、Ctrl+BキーまたはCommand+Bキーを繰り返し押してグループ解除し、グループ解除されたベクトルグラフィックを表示します。テキストを選択した状態で、カラーを目的のカラーに変更します。オーバーフレームのカラーを変更することによって、ボタンの視覚的なロールオーバー状態を作成します。
- ヒットフレームにキーフレームを追加します。ヒットフレームのキーフレームを選択した状態で、長方形ツールを使用してテキストを囲む長方形を描画します。ヒットフレームの内容はシンボル編集領域の外部では表示されませんが、ボタンのアクティブ領域を定義するために使用できます。テキストを長方形で囲むことによって、ボタンはユーザがテキストのどの部分にポインタを置いたときでも同様にアクティブになります。
- ステージ上部の編集バーでページ１のリンクを選択するか、ライブラリ内でページ１シンボルをダブルクリックして、ページ１のタイムラインに戻ります。
- Actionsレイヤーのフレーム１にボタンに関連するコードを追加します。Actionsレイヤーのフレーム１で空白のキーフレームを選択し、アクションパネルを開きます。以下のコードを入力します。
import flash.net.*;
function markClickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('http://www.adobe.com/'), '_blank');
}
mark_btn.addEventListener(MouseEvent.CLICK, markClickHandler);
- 制御／ムービープレビューを選択します。「Mark Sousa」ボタンをクリックし、リンクによって新しいブラウザウィンドウでWebサイトが表示されることを確認します。前の手順のActionScriptコードによって、markClickHandlerイベントハンドラ関数が、mark_btnボタンインスタンスのクリックイベントのリスナーとして割り当てられます。イベントハンドラ関数がイベントによってトリガされると、navigateToURLコマンドによってブラウザがトリガされ、新しいWebページがロードされます。
- ファイルを保存します。
ボタンシンボルの操作について詳しくは、『Flash CS4 Professionalユーザガイド』の「ボタンシンボルの操作」を参照してください。
サウンドトラックの追加
Flash Playerでは、SWFファイルに埋め込まれたサウンドや、SWFファイルの外部のサウンドを再生できます。外部オーディオを使用する場合は、MP3形式で作業します。埋め込まれたオーディオを使用する場合、サポートされる形式のオプションは多くなり、中でもASND形式は注目に値します。
ASND形式を使用すると、FLAファイルに埋め込まれたオーディオファイルをSoundbooth CS4を使ってラウンドトリップ編集することができます。その結果、Soundbooth CS4の保存されたスナップショット機能によって、容易にソースオーディオの設定を試してみたり、リビジョンヒストリを確認したりすることができます。
タイムラインにサウンドを追加し、サウンドがアニメーションと適切に同期されるようにサウンドを編集するには、次の手順を実行します。
- Buttonsレイヤーの上に新規レイヤーを作成し、名前をSoundtrackに設定します。
- ファイル／読み込み／ライブラリに読み込みを選択して、サンプルファイルのCS4_Project/_Source/Soundboothフォルダにあるsoundtrack.asndファイルを読み込みます。サウンドファイルが、タイムラインではなく、ライブラリ内に表示されます。
- Soundtrackレイヤーのフレーム１でキーフレームを選択し、プロパティインスペクタの「サウンド」セクションの名前メニューでサウンドを選択します。「同期」オプションを「ストリーミング」に設定します。ストリーミングサウンドはファイルのダウンロード時に再生され、タイムラインの対応するフレームと同期しています。
- 各レイヤーでフレーム400を選択し、F5キーを押してすべてのレイヤーのタイムラインをフレーム400まで拡張します。
- フレーム35の停止アクションをフレーム400に移動して、タイムラインでオーディオトラックを最後まで再生できるようにします。アクションを含むキーフレームをクリックして選択し、ドラッグしてタイムラインの下の方へ移動できます。
- オーディオファイルは、400フレームのタイムラインに対して少し長くなっています。ファイルをトリミングするには、ライブラリ内のサウンドファイルを右クリックし、「Soundbooth CS4で編集」を選択します。ファイルが Soundbooth で開かれます。
- Soundboothでは、オーディオトラックはワークスペースの右側に表示されます。各トラックの左側と右側にはフェードおよびトリミングハンドルがあり、サウンドの最初と最後を簡単に処理できます。大きい方のオーディオトラックの右側にポインタを置いて、カーソルがブラケット付きの矢印アイコンに変化するのを確認します。アイコンをクリックし、中央に向かってドラッグしてファイルの最後をトリミングします。約17秒の時点がどのあたりかを確認するには、編集領域の上部にあるタイムマーカーを使用します。
- ASNDファイルを保存し、Flashに戻ります。
- ASNDファイルに対して行った更新の内容は、FLAファイルに戻ると自動的に利用できます。「ムービープレビュー」コマンドを実行し、更新されたオーディオをテストします。スリップ音がミックスでは少し遅く、また少し長いようです。FLAファイルに戻ってもう一度サウンドファイルの編集モードを開始します。Soundboothをまだ開いている場合は、直接Soundboothに戻ることもできます。
- 小さい方のサウンドの左側にポインタを置いて、サウンドの最初の部分をトリミングして自動車のスリップ音を分離します。このファイルをドラッグして左端に移動します。この時点に配置すると、スリップ音が直ちに再生され、アニメーションのタイミングに近づきます。
- ASNDファイルを保存し、Flashに戻って更新内容をテストします。サウンドの同期が適切に行われるまでこの手順を繰り返します（図14）。
- 編集が完了したら、Soundboothに戻ってヒストリパネルの右下にあるスナップショットアイコンをクリックし、「新規スナップショット」を選択してファイルのスナップショットを保存します。表示されたダイアログボックスでスナップショットの名前を入力し、ASNDファイルを保存します。編集作業が終了したら、Soundboothを閉じてかまいません。
SWFファイルのパブリッシュ
Dreamweaverでの作業に移る前に最後に行う作業は、最終的な更新内容をSWFファイルにパブリッシュすることです。パブリッシュの公式の手順を実行するには、ファイル／パブリッシュを選択します。「パブリッシュ」コマンドでは、「ムービープレビュー」コマンドと同様にSWFファイルが書き出されます。ただし、パブリッシュ機能では、デフォルトでHTMLファイルも書き出され、オプションで他の複数の書き出しファイルの種類を選択することもできます。このチュートリアルでは、HTMLオプションを無効にしているので、ここでは追加の手順を実行する必要はありません。
パブリッシュ設定のパラメータについて詳しくは、『Flash CS4 Professionalユーザガイド』の「パブリッシュ設定」を参照してください。
Dreamweaverでのページの仕上げ
どのようなプロジェクトのワークフローでも、最後にDreamweaverを使用します。Dreamweaverによって、個々のファイルを編集したり、Webサイト全体を構成するファイルのコレクションを視覚化したりすることができます。コンテンツとレイアウトのテクニックを組み合わせ、コードプレビューとライブプレビュー（WYSIWYG）を用いて編集することによって、Webページを構築します。
ここでは、Dreamweaverでサイトを設定し、簡単なWebページを構築する方法を説明します。また、作業内容をプレビューし、サイトをサーバにアップロードする方法についても説明します。
Dreamweaver CS4製品ツアー
Dreamweaverは、HTMLやその他のWebスクリプティングテクノロジを使用してWebサイトを作成するための開発環境です。最も簡単に言うとDreamweaverはテキストエディタですが、幅広いサイト管理機能や、スクリプティングとマークアップテクノロジのサポートによって、Webサイト制作プロセスを支える強力なツールとなっています。CS4プロジェクトのワークフローでは、完成したサイトをサーバにアップロードする前に、Dreamweaverで制作ラインの最終的な作業を行います。作成済みのDreamweaverテンプレート（DWT）とカスケーディングスタイルシート（CSS）を使用して、簡単なWebページレイアウトを作成してプレビューします。
Dreamweaverのワークスペースを確認するには、次の手順を実行します。
- Dreamweaverを開き、新しいHTMLファイルを作成します（ファイル／新規作成を選択し、新規ドキュメントダイアログボックスで「空白ページ」と「HTML」を選択します）。
- ワークスペースの主な要素を確認します。ワークスペースの要素には、ドキュメントウィンドウ（コードビュー、分割ビュー、デザインビューのいずれかでコンテンツが表示されます）、プロパティインスペクタ、挿入パネル、CSSスタイルパネルおよびファイルパネルがあります（図15）。
Dreamweaverの使用方法について詳しくは、『Adobe Dreamweaver CS4ユーザガイド』を参照してください。
Dreamweaver で 開発用のサイトを定義する方法を紹介します。
Dreamweaverでの作業で最も重要なポイントの１つは、ファイルやファイル構造を作成する前にサイトを定義することです。Dreamweaverはサイトの構築を支援しますが、少なくとも、サイトのルートフォルダが配置される場所を指定する必要があります。サイトを定義する際に、サイトの生成や定期的な更新時の保守を容易にするFTPオプションやその他の詳細を設定します。
プロジェクトのサイトを作成するには、次の手順を実行します。
- CS4_Project/_Source/DreamweaverフォルダにあるTemplatesフォルダをCS4_Projectフォルダに移動します。CS4_Projectフォルダは、前に説明したように、すべてのパブリッシュしたファイルが格納される、サイトのルートフォルダです。Templatesフォルダをプロジェクトのルートフォルダに移動すると、用意されているアセットに含まれている定義済みテンプレートをDreamweaverですぐに利用できます。
- Dreamweaverでサイト／新規サイトを選択して、サイト定義ダイアログボックスを開きます。「詳細設定」タブが選択されていない場合は「詳細設定」タブをクリックします（図16）。
- 「サイト名」テキストボックスにCS4 Projectと入力し、CS4_Projectフォルダを参照します。「OK」をクリックします。
- サイトのコンテンツとディレクトリがファイルパネルに表示されます。
Dreamweaverテンプレートを使用した新規ページの作成
新規Webページは、最初から作成することも、作成済みのDreamweaverテンプレートから作成することもできます。Dreamweaverテンプレートには、編集可能な領域を含む定義済みのレイアウトが含まれています。通常、テンプレートは、制作プロセスの期間を短縮し、複数のページで一貫性のある構造を実現するために使用されます。このチュートリアルで提供するアセットには、コンテンツセルの単純な縦の列をページの中央に配置したカスタムテンプレートが含まれています。
Webページを作成し、コンテンツを設定するには、次の手順を実行します。
- 前の手順で作成したHTMLファイルをまだ閉じていない場合は、HTMLファイルを閉じます。
- ファイル／新規を選択します。新規ドキュメントダイアログボックスで、左側の「テンプレートから作成」オプションを選択します。他のテンプレートをインストールしていない場合、デフォルトではpromo_pageテンプレートが選択されています。適切なテンプレートが選択されていることを確認し、「作成」をクリックします。
- ファイルをpromo_page.htmlという名前でCS4_Projectフォルダに保存します。
- ページの上部にあるheaderContentセルでプレースホルダのテキストを選択し、削除します。
- カーソルがheaderContentセル内にある状態で、挿入／メディア／SWFを選択します。ファイルの選択ダイアログボックスでpromo_header.swfファイル（CS4_Project/_Sourceフォルダにあります）を選択し、ヘッダムービーを挿入します。「OK」（Mac OSでは「選択」ボタン）をクリックします。
- ファイルを選択した後に表示されたオブジェクトタグのアクセシビリティ属性ダイアログボックスで、「タイトル」テキストボックスにDouble Identity Movieと入力します。この手順によって、コンテンツに関する基本的なアクセシビリティ情報がブラウザに提供されます。HTMLフォームやボタンを含むさらに複雑なレイアウトでは、「アクセスキー」テキストボックスと「タブインデックス」テキストボックスを使用して、全体的なユーザ体験を向上させ、特殊なニーズを持つユーザにページを開放するようにできます。このサンプルでは、「アクセスキー」テキストボックスと「タブインデックス」テキストボックスは空白のままでかまいません。「OK」をクリックします。
- titleContentセルでプレースホルダのテキストを選択し、削除します。
- CS4_Project/_Source/Dreamweaverフォルダにあるbody.txtファイルを開きます。タイトルをコピーし、titleContentセルにペーストします。
- bodyContentセルでプレースホルダのテキストを選択し、削除します。
- body.txtファイルの残りのテキストをコピーし、bodyContentセルにペーストします。
- footerContentセルでプレースホルダのテキストを選択し、削除します。
- CS4_Project/_Source/Dreamweaverフォルダにあるcopyright.txtファイルを開き、テキストをコピーし、footerContentセルにペーストします。テキストは、Dreamweaverテンプレートでセルに適用されているCSS設定に基づいて、自動的に書式設定されます。
- 最後に、Dreamweaverウィンドウの上部にある「タイトル」テキストボックスにDouble Identityと入力します。
- ファイルを保存します。依存ファイルのコピーダイアログボックスが表示されたら、「OK」をクリックします。
メモ：手順 12によって、プロジェクトのルートフォルダにScriptsという名前のフォルダが作成され、SWFファイルをWebページに埋め込むために必要なSWFObjectファイルのコピーが追加されます。この処理はすべて自動的に行われます。これらのファイルはサイトのパブリッシュしたファイルセットの一部であり、Webサイトにアップロードする必要があることを覚えておいてください。
CSSの書式の変更
最近のWebページデザインの一般的な手法では、CSS定義を使用して、コンテンツセルのレイアウト、テキストの書式およびコンテンツの書式を制御します。前の手順で指定したテンプレートでは、CSSを使用してセル構造を作成しています。DreamweaverテンプレートファイルでCSS定義を編集して、そのテンプレートを使用するすべてのページを更新することができます。
タイトルのテキスト、本文のテキスト、および著作権情報のテキストに関連付けられたCSS書式を編集するには、次の手順を実行します。
- ファイルパネルを使用して、Templatesフォルダにあるpromo_page.dwtファイルを開きます。
- ページタイトルのスタイル定義を編集するには、まず必要に応じて、CSSスタイルパネルを展開します。タイトルテキストの編集可能領域にカーソルを置き、CSSスタイルパネルの上部にある「現在」ボタンをクリックします。
- 定義済みのプロパティを編集してページ書式に対する変更を試してみたり、新しいプロパティを追加して結果を確認したりします。例えば、カラーの値を変更します。カラーの値を変更すると、上部の３つのセルのカラーは変更されますが、下のセルのカラーは変更されません。これは、現在編集しているスタイルが、HTMLのdivタグの再定義であるからです。テンプレート内の各セルはdivタグ内に存在するので、スタイル定義に対する変更がすべてのセルに適用されます。footerContentセルでは、カスタムCSSクラスが最後のdivタグに直接適用されているので、若干異なります。カスタムCSSクラスを適用することによって、divタグ自体のグローバルな定義はオーバーライドされます。Dreamweaverワークスペースをコードビューに切り替えて、CSSとdivタグの構造を確認します。
- テンプレートファイルを保存し、テンプレートファイルの更新ダイアログボックスで「更新」をクリックします。
ヒント：Dreamweaverテンプレートは、サイトの複数のページにまたがって書式を管理するのに便利です。ただし、ページをテンプレート定義から解放する必要がある場合は、修正／テンプレート／テンプレートマークアップの削除を選択できます。
CSSの操作について詳しくは、「Best practices with CSS in Dreamweaver CS4*」を参照してください。
ページのプレビュー
Dreamweaverの優れている機能の１つに、複数の方法でサイトをプレビューする機能があります。Dreamweaverのワークスペースでは、コードビューとデザインビューを切り替えたり、「分割」を選択して両方のビューを表示したりすることができます。ビューを変更するには、ドキュメントウィンドウの上部にあるビューボタンのいずれか（「コード」、「分割」または「デザイン」）をクリックします。Dreamweaver CS4の新機能として、JavaScriptを含むライブコードを直接ワークスペースで表示できることが挙げられます。また、F12キーを押すことにより、現在のページを簡単にブラウザで開くこともできます。
ヒント：Webページをビジュアルに作成しながらコードビューに切り替えることによって、HTMLマークアップやJavaScriptを学習することができます。
サーバへのファイルのアップロード
ここまででサイトをインターネット上のサーバにポストする準備が整いました。任意のFTP（ファイル転送プロトコル）ツールを使用してパブリッシュしたファイルをサーバに転送できますが、DreamweaverのファイルパネルにFTP機能が組み込まれていることに注目してください。DreamweaverのFTP機能を使用すると、ワークフローでの編集中にサーバとファイルを同期するときに便利です。また、ワークグループでのバージョン管理のために、Dreamweaverを使用して、サーバのファイルをチェックアウトおよびチェックインすることもできます。
完成したサイトをアップロードしてワークフローを完了するには、次の手順を実行します。
- CS4 Projectサイト定義にリモートサイトを入力していることを確認します。サイト定義を編集するには、サイト／サイトの管理を選択します。サイトの管理ダイアログボックスで、CS4 Projectを選択し、「編集」をクリックします。
- サイト定義ダイアログボックスで、「カテゴリ」リストの「リモート情報」オプションをクリックし、アクセスメニューで「FTP」を選択します。「FTPホスト」、「ログイン」および「パスワード」テキストボックスに、リモートサーバのログイン情報を入力します。この情報が不明な場合は、インターネットサービスプロバイダまたはネットワーク管理者から情報を入手できます。ログイン情報を入力した後、「テスト」をクリックして接続をテストします。「OK」をクリックします。
メモ：リモートサーバへのアクセス権がない場合は、ここで紹介している概念のみを理解し、次のセクションに進んでください。
- ファイルパネルを開き、パネルの左上にあるリモートホストに接続ボタンをクリックします。
- 接続が確立されたら、ローカルビューでアップロードするファイル（_Sourceフォルダ以外のすべて）を選択します。PUTボタン（上矢印）をクリックして、ファイルをサーバにアップロードします。ファイルパネルの右上にあるメニューで「ローカルビュー」から「リモートビュー」に切り替えることによって、リモートビューに切り替えることができます。別の方法でファイルのアップロードを処理する場合でも、Dreamweaverで作業しているときにはファイルパネルを使用してローカルファイルを管理します。
編集ワークフローのレビュー
これでサイトは完成しましたが、Webページの編集や更新が将来必要になることを考えておくのが現実的です。ここでは、完成したサイトの編集ワークフローの概要を説明します。
画像コンテンツの変更
CS4製品のインターフェイスでは、グラフィックのラウンドトリップ編集を直接サポートしていませんが、画像を更新することは簡単です。ここで重要なことは、個々のグラフィックを操作することです。Fireworksモックアップに含まれるグラフィックを更新している場合は、古いグラフィックを削除してから、新しいグラフィックを読み込んで置き換えます。元のグラフィックを削除する前に、グラフィックのサイズや位置をメモしておくと役に立つ場合があります。FLAファイルを更新している場合は、ライブラリのプロパティを通じてビットマップ画像を更新できます。FLAファイルの構造はモックアップよりも複雑なことが多いため、この機能は便利です。
ヘッダSWFの背景画像を変更するには、次の手順を実行します。
- Photoshopでcity_background.psdファイルを開き、必要に応じて背景画像を編集します。
- ファイル／Web用に保存を選択し、更新された画像をJPG形式でPhotoshopから書き出します。ファイルをcity_background.jpgという名前でCS4_Project/_Source/Photoshopフォルダに保存します。
- Flashでpromo_header.flaファイルを開きます。
- ライブラリで「ビットマップ１」をダブルクリックして、ビットマッププロパティダイアログボックスを開きます（図17）。「更新」をクリックし、保存したJPEGファイルを指定します。ビットマップ１画像が、更新されたJPEGの内容で更新されます。
- ファイルを保存し、サイトにアップロードできるようにSWFをパブリッシュします。
- 最後に、更新されたJPEG画像を使用して、Fireworksモックアップも更新します。
画像をFireworksファイルで更新するか、FLAファイルで直接更新するかを選択できます。一般的には、常にモックアップを更新することをお勧めしますが、FLAソースファイルが完成したら、モックアップをワークフローから除外することもできます。
サウンドコンテンツの変更
ASNDファイル形式によって、Flashファイルに埋め込まれたサウンドを簡単にラウンドトリップ編集できます。ASND形式では、元のソースファイルが編集のヒストリと共に保存されます。ソースファイルをASND形式で保存することによって、常に元のソースに戻り、必要に応じて編集を追加および削除できます。
ヘッダSWFのサウンドコンテンツを変更するには、次の手順を実行します。
- ライブラリ内のサウンドファイルを右クリックまたはCtrlキーを押しながらクリックし、「Soundbooth CS4で編集」を選択します。Soundboothが起動し、ビューにASNDファイルが表示されます。
- ヒストリパネル（図18）を使用して以前の編集内容を削除するか、必要に応じて変更を追加します。
- ASNDファイルを保存します。
- FLAファイルに戻り、SWFをパブリッシュして、パブリッシュしたファイルを変更内容で更新します。
- FLA ファイルを保存します。
Webページのテキストと書式の変更
Dreamweaverでは、テキストおよびCSSの書式を簡単に編集できます。開発の初期段階では、さまざまなテキストと書式の組み合わせを試してみることが一般的です。サイトの完成後にサイトを編集する場合は、前のセクションの「CSSの書式の変更」で説明したワークフローと同じワークフローに従います。
更新したファイルのサーバへのアップロード
既にインターネットに公開されているサイトに対してローカルで変更を加えた場合は、常に更新されたファイルをアップロードする必要があることを覚えておいてください。この場合も、FTPツールまたはDreamweaverのサイトパネルを使用して、ファイルをアップロードしたり、ローカルとリモートのファイルを同期したりします。更新されたファイルを、テスト用の非公開のWebディレクトリでステージングすることをお勧めします。これによって、サイトをWebサーバで実行したときに発生する可能性がある問題を把握できます。
次のステップ
ここでは、さまざまなAdobe CS4製品を使用して、Webサイト制作のワークフローを作成する方法を学習しました。プロジェクトの準備、モックアップの主な要素の定義、インタラクティブムービーの構築および展開用のWebページの仕上げのプロセスを行いました。次のステップとして、CS4製品でレイアウトテンプレートを作成する方法や、ワークフローに追加するその他の一貫性のあるアプローチを定義する方法を考えてみてください。
また、以下のリソースも参考にしてください。
Photoshop
Illustrator
Soundbooth
Fireworks
Flash
Dreamweaver
Tutorials & Samples |
Tutorials
- Creating and exporting Fireworks graphics as FXG files for Flash Catalyst
- Creating jQuery Mobile website themes in Fireworks
- Extracting CSS properties from Fireworks design objects
Fireworks Forum |
More |
| 12/16/2008 | Disappearing Mouse Cursor? |
|---|---|
| 01/13/2012 | Survey: Blend mode options in Brush tool? |
| 01/25/2012 | after a update of cs3 to 9.0.1 styles are broken |
| 08/15/2011 | CS5 plagued with many bugs in Lion |
Fireworks Cookbooks |
More |
| 09/07/2011 | How do I use FXG XML markup in Shape subclasses? |
|---|---|
| 10/15/2010 | Flex4 Dotted Line |
| 06/25/2010 | ComboBox that uses a NativeMenu (Air API) |
| 05/21/2010 | Localizing a Creative Suite 5 extension |
