一方、「詳細設定」タブでは、一連のカテゴリの中で様々な設定が用意されているだけで、カテゴリの詳しい説明などは省略されています。ここでは「詳細設定」タブを選択します。まずサイトに名前を付けます。ローカルルートフォルダは、右端にある「フォルダの参照」アイコンをクリックして、今回は、デスクトップ内を表示し、新規サイト作成のために保管してあるフォルダを選択します。Macではフォルダを選択しますが、Windowsではフォルダを一度開いてから選択します。次に初期設定イメージフォルダを作ります。右端にある「フォルダの参照」アイコンをクリックすると、ルートフォルダがどこに保管されているかの情報が表示されます。この中でimagesディレクトリを選択してから「選択」ボタンを押します。ノート:ウィンドウ内のこれ以降の部分はすべて任意の設定です。例えばHTTP アドレスは絶対リンクを解決してくれますが、今は不要なのでそのままにしておきます。キャッシュ情報は必要なのでチェックマークを付けます。これにより各種ファイルの情報は蓄積され、「アセット」パネルで使用できるようになります。カテゴリ欄から「リモート情報」をクリックします。社内の情報システム部やサーバホスティング業者からFTPへの接続情報を知っている場合は、プルダウンメニューでFTPを選択してその内容を記入することができます。続けてログイン及びパスワードを入れることで、接続されているかどうかを確認できます。ローカル/ネットワークのアクセス情報の場合も全く同様です。Web サーバがある場合は、接続後、情報をどこへアップロードすればよいかということを設定することができます。このようにリモート情報を完成することで、完成したサイトをどこに転送すればよいかという転送先情報が設定されます。
図 6: リモート情報の設定
次は、テストサーバです。これを設定することで、ブラウザ内で対象となるページを正確にプレビューすることができます。
図 7: テストサーバの設定
それは「バージョンコントロール」というカテゴリです。これによりバージョン管理ツールであるSubversionへの接続が可能となります。ノート: 残りのカテゴリですが、多くは、Dreamweaver CS4を使ってどのようにサイトや関連するツールを管理するかという設定です。例えばサイト全体をアップロードするときにどのファイルをアップしないか、テンプレートをいかにして管理するか、Spryアセットをどこに配備するか、などの問題を処理するときに使われるものです。これでサイトは定義されました。サイトはファイルパネル内に格納されたので、以後すべてのファイルやフォルダへアクセスすることができます。「アセット」パネルをクリックすると、サイト内の要素をキャッシュして、イメージ 素材やFlashファイルを閲覧することができます。あとで情報を追加したい場合、構築したサイトを簡単に編集することができます。アプリケーションバーへ戻り、そこでサイトの管理を選択すると、過去に定義したサイトの一覧が表示されます。必要とするサイト名をクリックし、反転させ、編集ボタンを押すと情報欄が再表示されます。リモート情報を選択して情報を入力することもできれば、テストサーバを選択して、PHPやColdFusionが稼動するサイトへ変更したり、イメージディレクトリの変更もできます。サイトに対しては、どんな変更をも行うことが可能です。「OK」をクリックし、「終了」をクリックして終了します。もしここで重要な変更を行った場合には、キャッシュ内に蓄積されます。ノート: 新たにプロジェクトを立ち上げる際には、まずサイトを定義することが何よりも重要ですが、必要なポイントを押さえればDreamweaver CS4のサイトの定義は簡単です。プロジェクトの立ち上げの段階でDreamweaver CS4に対して、必要なサイト情報の全てを設定することもできれば、後日リモート情報等を追加することもできます。
その他のリンク
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
印刷用に表示
DVDを見る人は多様で、そこにはいろいろなニーズがあります。その1つとして、複数のオーディオトラックを盛り込むことや、さまざなま言語に対応した字幕の追加が挙げられます。このチュートリアルでは、オーディオトラックや字幕トラックを追加して多言語対応のDVDを作成します。ここで紹介する方法は、オーディオコメンタリーの追加や、字幕による補助表示など、さまざまな応用や活用が可能です。このチュートリアルでは、Adobe Encore DVDで作成したDVDプロジェクトと、追加したいオーディオファイルをあらかじめ用意しておく必要があります。字幕の入力は、プロジェクトに対して直接行います。DVDプロジェクトを開く。オーディオトラックや字幕を追加するDVDプロジェクトを開きます。基となるプロジェクトは、あらかじめオーサリングを終えて、ほぼ作業が完了している必要があります。プロジェクトをプレビュー(ファイル/プレビュー)して、「ディスク」タブの「リンクチェック」オプションを使い、DVDで使っている映像やボタンなど各要素のリンクをチェックします。ここに日本語のオーディオトラックを挿入し、日本語と英語の字幕を追加していきます。
タイムラインにオーディオを配置
作成済みのオーディオファイルを読み込みます。オーディオを追加する最初の映像素材を開きます。「プロジェクト」タブから目的のオーディオファイルを既存のオーディオトラックの下(タイムラインにオーディオがまだ追加されていない場合は、ビデオトラックの下)にドラッグします。新しいオーディオトラックが表示され、マウスポインタの表示が変化したら、マウスボタンを放します。トラック名の右にあるドロップダウンリストで、そのトラックに設定する言語を選択します。他のオーディオファイルを追加するときは、それらも新しいトラックとして追加していきます。オーディオトラックは最大8個まで作成でき、DVDプレーヤーで再生するときは、そのうちの1つを選択することになります。再生トラックはリモコンなどで切り替え可能です。また、追加したオーディオトラックの言語設定と番号を確認しておきます。同じ言語のオーディオファイルは、すべて同じ番号のオーディオトラックに配置する必要があるためです。これは、プロジェクトに含まれるすべての映像素材で共通です。必要な効果音などは、すべて1つのオーディオファイルにミックスしてあります。
モニタウィンドウで字幕を入力
字幕を追加する映像素材を開きます。タイムライン/字幕トラックを追加を選択します。タイムラインウィンドウで、字幕を入力する最初の映像フレームの場所に時間インジケータを移動します。文字パレットで、フォントの属性やテキストの整列オプションを設定します。字幕の入力はモニタウィンドウで直接行います。文字ツールや縦書き文字ツールを使ってモニタウィンドウの任意の場所をクリックし、そこから字幕のテキストを入力していきます。これで、タイムラインに数秒間表示される字幕クリップが追加されました。字幕トラックの名前欄にあるドロップダウンリストから、そのトラックで使う字幕の言語を選択します。字幕の表示時間を変更するには、タイムライン内の字幕クリップの末尾を新しい位置にドラッグします。
新規に入力した字幕の表示時間は初期設定で決められており、環境ダイアログボックスで値を変更できます(編集/環境設定/字幕)
次に字幕を追加したい映像フレームの位置に時間インジケータを移動し、モニタウィンドウで直接テキストを入力します。このようにして、タイムラインに字幕クリップを追加する作業を続けます。異なる言語の字幕を入れるには、まず別の字幕トラックを追加します。ここでも、ドロップダウンリストを使って字幕の言語を選択します。先ほどと同じように、モニタウィンドウで字幕を入力します。字幕トラックは、最大32個まで作成できます。入力した字幕をプレビュー表示するときは、タイムラインウィンドウの字幕トラック名の左にあるボックスをクリックします。選択されたトラックは、ボックスにアイコンが表示されます。
モニタウィンドウで再生ボタンをクリックして、映像と字幕のタイミングを確認しましょう
ここでは、日本語と英語の字幕をそれぞれ追加しました。
字幕の色や位置を変更
初期設定の字幕の色では、背後の映像となじんでしまって読みづらいことがあります。字幕の色を変更するには、まずタイムライン上の字幕クリップを選択します。字幕のカラー定義は、3つのグループに分けられています。プロパティパレットで、カラーグループドロップダウンリストから別のカラーグループを選択します。配置した字幕が、映像の重要な部分と重なってしまっていることもあります。この場合は、ツールボックスの選択ツールを使い、モニタウィンドウ上で字幕を新しい位置にドラッグします。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
このビデオでは、ハイビジョン画質のBlu-rayディスク用のプロジェクトを作成する方法や、ポップアップメニューの作成方法などを学びます。このコンテンツを視聴するには Flash が必要です。この製品に関連したその他のビデオを見る。このチュートリアルのデモンストレーションと同じ操作を行うには下記のソフトウェアが必要です。
前提として必要な知識
DVDのオーサリングの中級知識
Dynamic Linkは、一つのアプリケーションで作成しているプロジェクトをレンダリングを行うことなく、その他のアプリケーションで開いて編集することを可能にします。「プロジェクト」パネルのシーケンスの名前を確認しておきます。「ファイル」メニューから、「プロジェクト設定」を選びます。264を選択することができます。
フレームレートや寸法などの詳細な設定
詳細な設定は新規プロジェクトダイアログボックスで設定します。「新規プロジェクト」ダイアログボックスで、「オーサリングモード」をBlu-rayに設定します。「オーサリングモード」をBlu-rayに設定することで、「寸法」からいくつかのサイズを選択することができます。「フレームレート」でフレームレートを選ぶこともできます。
シーケンスを読み込むためにダイナミックリンクを使用
シーケンスを読み込むためにダイナミックリンクを使用することができます。右側の「シーケンス」欄にそのプロジェクトに含まれるアセットと共にシーケンスが表示されます。表示されたシーケンスを選択して、「OK」をクリックします。Encoreのプロジェクトパネルを確認し、インポートしたシーケンスをタイムラインに配置します。
図 4: 「プロジェクト」パネルの新規アイテムを作成アイコン
HD素材の読み込み
「プロジェクト」パネルをダブルクリックして、HD素材を選択して、「開く」をクリックします。「プロジェクト」パネルで右クリックし、「読み込み」 / 「メニュー」と進めます。「メニューとして読み込み」ダイアログボックスで、メニューとして利用するPSDファイルを選択し、「開く」をクリックします。EncoreでHD素材をゼロから作成することもできます。「ライブラリ」パネルにはEncoreにあらかじめ用意されているHD用のメニューがあります。クリックすると、パネル内でプレビューすることができ、ダブルクリックするとプロジェクトに追加され、メニュービューアで開いて確認できます。プロジェクトにインポートしたメニュー、タイムライン、そのほかの素材を利用して、Blu-rayディスク用のナビゲーションを作成するには、フローチャートが効率のよい方法です。フローチャートは、メニュービューアの隣のタブからアクセスできます。あるいは、「ウィンドウ」メニューからもアクセスできます。左下には、スライダがあり、フローチャートのズームを調整することができます。左にドラッグすると、縮小され、右にドラッグすると、拡大されます。素材にマウスを合わせると、ツールチップが表示され、その素材の名前が表示されます。最初にメニューが開くように変更します。ディスクのアイコンをメニューのアイコンにドラッグします。フローチャートが更新されました。メニューのサムネイルと、そのメニューに設定されているボタンの名前が表示されています。これらのボタンからリンクを設定することもできます。
図 8: ボタンを素材にリンク
ポップアップメニューの作成
また、ポップアップメニューは透明度を設定することができます。DVDでは、この機能はサポートされていません。メニューを選択し, ポップアップとして利用したいメニューのPSDファイルを選択し、開きます。「プロジェクト」パネルで選択し、「プロパティ」パネルで、「ポップアップ」タブを選びます。「Blu-rayポップアップメニューとして表示」にチェックを入れます。すると、背景レイヤーが非表示になります。「プロジェクト」パネルでタイムラインを選択し、「プロパティ」パネルのポップアップメニューのリストから、ポップアップメニューとして設定したい素材を選択します。
図 10: ポップアップメニューを選択
ポップアップメニューからのリンクの設定は、通常のメニューからのリンクと同様の方法で行います。
図 11: ポップアップメニューからのリンクの設定
「プロジェクト」パネルでポップアップメニューを選択します。「プロパティ」パネルで「ポップアップ」タブを開き、背景タイムラインのメニューでポップアップを表示させたいタイムラインに変更します。背景フレームではプレビューに利用したい背景のフレームを選択します。
ディスクの書き出し
「ビルド」パネルでディスクを書き出します。「形式」のメニューでBlu-rayが選択されていることを確認します。Blu-rayのドライブがコンピュータに接続されていれば、「ビルド」ボタンをクリックして、書き出しを実行することができます。
その他のリンク
著者について
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
ヴァン・ゴッホでなくても美しい夜景は描けます。
これに雲、星、満月を描いて夜景の画像を作成しましょう
この記事に書かれている操作を行うには、以下のソフトウェアおよびファイルが必要です。
この記事のために必要な予備知識
夜の雲を作成する。最初に、ペンツールを使って雲のアウトラインを描きます。曲線は完全に滑らかでなくても、ベクトルパスが閉じていれば構いません。線のカラーは白を使うのがベストです。ここでアウトラインを消して、シェイプに円錐のグラデーション塗りを適用します。そしてテクスチャを砂壁に変え、適用量を19%に増やします。
次に、雲のオブジェクトにライブエフェクトを適用しましょう
20に設定します。その他のオプションはデフォルトの設定のままにしておいてください。
同じオブジェクトにもう1つ別のライブエフェクトを加えましょう
ぼかし/ぼかし(ガウス)を選択し、ぼかしの半径を6に設定してください。
では次に、この雲のオブジェクトを複製しましょう
オブジェクトを選択し、コピー&ペーストします。次のように設定を変更します。
複製されたオブジェクトのレイヤーモードをファジーライトに変更し、エッジに「エッジをぼかす」を適用して、その適用量を40~50に設定
では、もっと雲を作って、それぞれを違った形状にしましょう
おもしろくなるのはこれからです。雲は最低でも5回は複製してください。雲をカスタマイズするには、次の手順を実行します。グループ化されたオブジェクトを選択し、ダイレクト選択ツールを使用して複製された雲のオブジェクトを移動します。元の雲オブジェクトを変形し、ダイレクト選択ツールでベクトルパスのポイントを変えます。複製された雲オブジェクトを選択します。
「色相/彩度」ライブエフェクトを使用したり、変形や回転を施したりして、雲を様々に変化させてもいいでしょう
ここでさらに雲に背景を追加しましょう
ペンツールで簡単なシェイプ(長方形や円でも構いません)を作成し、「エッジをぼかす」を適用して、その値を41にします。オブジェクトの不透明度を72に変更し、選択したオブジェクトをロックします。背景の不透明度を100から72に変更し、雲の大部分をカバーするサイズにオブジェクトを拡大します。星を作成する。星を作るには、まず、幅と高さが46以上の円を描きます。「エッジをぼかす」を選択し、適用量を37にします。星のオブジェクトを選択し、高さと幅を7に変えます。
ここまで作成したら、選択、コピー、ペーストの手順で星を複製して増やしましょう
高さと幅を変えても構いません。ただし、高さと幅は等しく、その値は2から7の間にする必要があります。星をもっと明るくしたいなら、その星のオブジェクトを選択して、一度か二度それを複製し、グループ化します。星をすべて作成したら、夜空に配置してください。満月を作成する。この最後の節では、まず、楕円形ツールを使って高さと幅が173の円を描きます。ライブエフェクト/シャドウとグロー/グローを選択します。グローカラーに#A6C8D8を割り当て、不透明度を65、柔らかさを21に設定してください。線形グラデーションのハンドルを動かして、青い陰影を幾分加えます。次に、月面のクレーターを作ります。ペンツールで外形を描き、 レイヤーモードを「通常」から「反転」に変えます。また、シェイプの塗りの種類を「パターン」から「油彩1」に変更し、「エッジをぼかす」を選択して、適用量を23にします。テクスチャには「紙やすり」を選択し、42%に設定します。「透明」チェックボックスはオンにしてください。別のクレーターを作成するには、雲を複製したときと同様の方法(つまり、クレーターのオブジェクトを複製、サイズを変更、色調や変形で変化をつける、という手順)を用います。これで素敵な夜景ができ上がりました。
次のステップ
Fireworksについてさらに詳しくは、次のリソースを参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
Fireworks®で、様々な種類の非破壊的ライブフィルタエフェクトを作成できることはすでにご存じでしょう
しかし、ビットマップの色の違いを基に、ビットマップを透明化するライブフィルタテクニックについてはご存じでないでしょう
このテクニックを使用すると、画像に古紙のような感じを出すことができます。この記事に書かれた操作を行うには、以下のソフトウェアが必要です。
「古紙」効果の作成
「古紙」効果を適用した画像を作成するには:
キャンバスサイズの矩形を描画します。
矩形のクローンを作成します(編集/クローン)
com*から入手可能)を矩形のクローンに適用します(拡張機能/テクスチャ)
矩形のクローンを#BD8E64で塗りつぶし、50%の透明度でブレンドモード/減法を適用します。シャープライブフィルタを矩形のクローンに適用し、テクスチャがよりはっきりと現われるようにします。
両方の矩形オブジェクトを選択して統合し(修正/選択範囲の統合)、1つのビットマップにします(次のステップで必要)
覆い焼きツールを選択し、ビットマップ中央の覆い焼きを開始します。次の画像は、私が覆い焼きツールで使用した設定です。覆い焼きツールの使用後、画像は次のようになっています。次はいよいよ古紙のスキャンです。何枚かの古紙をスキャンするか、古紙画像のストックを検索します。
古紙のピットマップを選択し、プロパティインスペクタから、アルファチャンネルに変換ライブフィルタを適用します([+]ライブフィルタ/その他/アルファチャンネルに変換)
画像は次のようになります。テクスチャを設定した矩形オブジェクトの上に古紙の画像を配置します。
他のアートワークの上に配置した場合は、ブレンドモードをファジーライトに変更し、シャープライブフィルタを約3回適用します(これにより、シャープライブフィルタを1回だけ適用した場合よりもディテールが精細になります)
画像は次のようになります。ディテールをさらに精細にするには、スクリプトフォントを使用して下の画像のように古色を出します。
次のステップ
Fireworks、およびこの記事で使用した、アルファチャンネルに変換ライブフィルタについて詳しくは、次のリンクを参照してください。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
この業界は、コミュニケーションがすべてです。Creative Suite 3(CS3)のリリースにより、これらの2つのアプリケーションは、これまでのわだかまりをついに葬り去り、ときにはためらいがちであっても、手を取り合うようになりました。多くのグラフィック専門家は、複数のアプリケーションを使用して作品を生み出します。このアプリケーション間の切り替えは、CS3によってかなり容易になりました。強化された主な内容は次のとおりです。
一般的に使用されるPhotoshopのブレンドモードのサポート(これによりFireworksのブレンドモードが7つ追加され、合計45のブレンドモードを使用できるようになりました)
この記事に書かれた操作を行うには、以下のソフトウェアが必要です。Fireworks CS3は、階層レイヤー、Photoshopレイヤー効果、一般的なブレンドモード、レイヤー(ビットマップ)マスクおよび編集可能なテキストのネイティブサポートを提供しています。レイヤーグループを含むPhotoshopファイルを古いバージョンのFireworksに読み込むと、ファイルは複数のオブジェクトを含む単一レイヤーに変換され、構造がめちゃくちゃになってしまいます。必要に応じて新しいサブレイヤーを作成し、そこにアイテムを移動することができます。また、いつでも自由に要素をレイヤー間で移動できます。複数のサブレイヤーを作成してグループ化することもできます。階層レイヤーは、重要な統合機能です。Fireworksでは、アプリケーションの最初のリリース以来、疑似サブレイヤーを作成することができました。つまり、Fireworksの各レイヤーは、ビットマップまたはベクトルの複数のオブジェクトをサポートしています。実質的には、ある形態のサブレイヤー構造が存在していることになります。Photoshopでは代わりに階層レイヤーをサポートすることで、関連するレイヤーをメインレイヤー内にグループ化したり、配列したりできるようにしています。Fireworks CS3がリリースされる以前は、PSDファイル内のレイヤーグループは失われ、各レイヤーは1つのメインレイヤー内で単一のオブジェクトとなっていました。同様に、複数のレイヤーやオブジェクトを含むFireworksファイルをPSDファイルとして保存すると、各オブジェクトが独自のレイヤーに分割されていました。どちらのシナリオにおいても、デザイン構造は失われ、レイヤーやオブジェクトの順序やグループを再編成する必要がありました。私はPNGからPSDへのファイル変換をこれまでに何度も行ってきましたが、これは本当にやっかいな作業です。Fireworksに階層レイヤーのサポートが追加されたことで、2つのアプリケーション間のやりとりはやっとスムーズに行われるようになりました。
サブレイヤーの作成
サブレイヤーを作成し、オブジェクトを追加するには:
レイヤーを選択し、レイヤーパネルの新規サブレイヤーを作成ボタンをクリックします。オブジェクトをサブレイヤーにドラッグするには、そのサブレイヤー上でフォルダアイコンがハイライト表示されていることを確認してから、マウスボタンを離します。
レイヤーとオブジェクトの再配置
オブジェクトを別のレイヤーに移動するには、オブジェクトをドラッグし、パネル上の2つのアイテム間に黒い挿入マークが表示されたら、マウスボタンを離します。レイヤー内のレイヤーまたはオブジェクトをドラッグアンドドロップするときは、親のレイヤーがハイライト表示されます。Photoshopには、複数のバージョンにわたり、レイヤースタイルという柔軟な特殊効果機能が含まれていました。これらの効果には、シャドウ、グロー、ベベル、オーバーレイ、ストロークなどがあり、Photoshopのユーザはこれらを使用して、レイヤーコンテンツの外観を変更できます。レイヤースタイルは非破壊的で、いつでも編集できます。これらはFireworksの最初のリリース以来搭載されていた、ネイティブのFireworksライブフィルタと似ているところがあります。Fireworks 8以前では、PSDファイルを読み込むと、レイヤースタイルは統合され、エフェクトはオブジェクトの一部となり、編集はできなくなっていました。プロパティインスペクタのライブフィルタを追加メニューから「Photoshopライブエフェクト」を選択して、Photoshopのレイヤーエフェクトを任意のFireworksドキュメントに適用することもできます。FireworksファイルをPSD形式で保存すると、適用したライブエフェクトがファイルに含まれます。図2:プロパティインスペクタのライブフィルタを追加メニューからPhotoshopライブエフェクトを適用します。たとえばストロークエフェクトなどは、Fireworksでは難しいエフェクトを簡単に生み出すことができます。Fireworks 8以前でビットマップオブジェクトの周りにストロークを作成することは、この機能を持つ拡張を使用しない限り、難しい作業でした。ストロークエフェクトを使用すると、ビットマップの周りに境界線を簡単に追加できます。またストロークは、表示されているオブジェクトのピクセルをたどります。このため、手描きのマスクをオブジェクトに適用する場合、ストロークはマスクのアウトラインをたどります。これはとても便利です。図4:Fireworks CS3のストロークエフェクトで、ビットマップオブジェクトにストロークを簡単に適用できます。レイヤーエフェクトインターフェイスは、Photoshopの同等の機能ほど堅牢ではありません。例えば、このインターフェイスでブレンドモードやグラデーションの色を変更することはできません。ただし、互換性の向上という点においては、進歩が見られます。2つのアプリケーション間のラウンドトリップという点では、ファイルをPSD形式で保存することが鍵となります。ただし、ファイルをPSDとして保存すると、2つのアプリケーション間を自由に切り替えて作業できます。対応するレイヤースタイルを持つネイティブのFireworksライブフィルタ(ドロップシャドウ、ベベル、エンボスなど)は保持され、サポートされていないライブフィルタ(カラー調整、ぼかし、ノイズなど)はPSDファイルから削除されます。
信じられますか
焼き込みリニア
覆い焼きリニア
Fireworksでは、ブレンドモードをレイヤーやオブジェクト(ビットマップまたはベクトル)に適用できます。ただし、ブレンドモードをレイヤーに適用した場合、レイヤー内のオブジェクトに適用したブレンドモードは削除されます。
私が作成したイメージをサンプルとして使用して、これらのブレンドモードを詳しく見ていきましょう
ディゾルブブレンドモードは、現在のレイヤーと基になっているレイヤー間、または現在のオブジェクトと基になっているオブジェクト間の色をランダムに選択して、ブレンドのエフェクトを生み出します。これは、透明なノイズの作成と似ています。以下では、2つの矩形を使用しました。上のイメージは緑で、ディゾルブブレンドモードが適用されています。下のイメージはパターンで塗りつぶされており、キャンバスは白です。ディゾルブは、その不透明度値を低くしたときに認識できるようになります。
焼き込みリニア
焼き込みリニアは、現在のレイヤーと基になっているレイヤー、またはオブジェクトと基になっているオブジェクトの各チャネルを検査することで、イメージを暗色化します。背景色の明るさを削減し、ブレンドカラーを反映させます。中間色は白なので、焼き込み(リニア)と白をブレンドしても結果は変化しません。図6では、元のイメージを左側に、ブレンドしたイメージを右側に示しています。
図6:焼き込みリニアが適用されたイメージ(右側)
覆い焼きリニア
覆い焼きリニアは、イメージを明るくします。現在のレイヤーと基になっているレイヤー、またはオブジェクトと基になっているオブジェクトの各チャネルを検査し、背景色を明るくします。このブレンドモードはイメージを明るくします。中間色は黒なので、覆い焼き(リニア)と黒をブレンドしても結果は変化しません。図7では、元のイメージを左側に、ブレンドしたイメージを右側に示しています。
図7:覆い焼きリニアが適用されたイメージ(右側)
ビビッドライトは、焼き込み(カラー)と覆い焼き(カラー)のエフェクトを組み合わせてコントラストを強めるブレンドモードです。ブレンドカラーが中間のグレーより暗い場合、ビビッドライトはコントラストを強めてイメージを暗色化します。中間のグレーより明るい場合は、コントラストを弱めてイメージを明色化します。以下の例は、非常に低いコントラストのイメージを際立たせる方法を示しています。暗い領域はさらに暗くなり、明るい領域はさらに明るくなっており、中間色の値がほとんど存在しなくなっています。図8では、右側のイメージにビビッドライトが適用されています。
図8:ビビッドライトが適用されたイメージ(右側)
リニアライトはコントラストを強めるもう1つのモードですが、ビビッドライトと異なる点は、焼き込みリニアと覆い焼きリニアを組み合わせていることです。このモードは、コントラストではなく、明るさを調整します。ブレンドカラーが中間のグレーより暗い場合、リニアライトは明るさを弱めてイメージを暗色化します。ブレンドカラーが中間のグレーより明るい場合は、明るさを強めてイメージを明色化します。中間のグレーとブレンドしても、イメージは変化しません。同じイメージを使用して2つのモードを比較すると、差がわかりますが、この差は微妙です。図9では、右側のイメージにリニアライトが適用されています。
図9:リニアライトが適用されたイメージ(右側)
ピンライトは、ブレンドカラーに応じてカラーを置き換えます。ブレンドカラーが50%のグレーより明るい場合、ブレンドカラーより暗いピクセルは置き換えられ、ブレンドカラーより明るいピクセルは変更されません。ブレンドカラーが50%のグレーよりも暗い場合、ブレンドカラーより明るいピクセルは置き換えられ、ブレンドカラーよりも暗いピクセルは変更されません。図10の右側のイメージでは、同じ写真の2つのコピー間に白い矩形が挟まれています。上のイメージにはピンライトブレンドが適用されています。矩形の領域が、その外側の領域よりも明るいことに注目してください。
図10:ピンライトが適用されたイメージ(右側)
濃い混色は、基になっているイメージまたはキャンバスカラーに直接関係のある、8つの純色にまでイメージのカラー数を減少します。以下の例では、右側のイメージは青い矩形の上に重なっています。
図11:濃い混色が適用されたイメージ(右側)
次のステップ
今後も改善は必要ですが、Fireworks CS3の機能セットがこれだけ拡張されたことは喜ばしいことです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
これらの新しいオブジェクトをリッチシンボルと呼びます。リッチシンボルは、Webサイトのデザイン、インターフェイスのプロトタイプまたは他のグラフィックデザインの構成に使用および再使用できる、編集可能なデザインでありインターフェイスコンポーネントです。この記事に書かれた操作を行うには、以下のソフトウェアが必要です。
リッチシンボルとは
Fireworks CS3におけるリッチシンボルとは、簡単に言えばプロパティを編集できるデザインコンポーネントです。リッチシンボルには、テキストラベルを編集できるサイズ変更可能なボタン、ストロークとカラーを変更できるグラフィックボーダー、様々な状態や外観のスキームを持つグラフィックシンボルなどがあります。FlexアプリケーションのMXMLに直接書き出すことができる、スタイル設定のしやすいFlexコンポーネントもリッチシンボルです。ドキュメントにリッチシンボルを追加するには新しい共有ライブラリパネル(ウィンドウ/共有ライブラリ)からインスタンスをドラッグし、プロパティを変更するには新しいシンボルプロパティパネル(ウィンドウ/シンボルプロパティ)を使用します。図1:シンボルプロパティダイアログボックスでリッチシンボルのプロパティを編集します。これら3つの機能が統合され、一貫性の高いデザインコンポーネントが作成されます。リッチシンボルをすぐに使用したり作成したりするために、これらの3つの機能に習熟する必要はありませんが、これらの機能の実用的な知識があれば、独自のリッチシンボルを作成するのに役立ちます。一時的なユーザには必要以上に複雑に見える場合もありますが、実はそうではありません。シンボルは単純で、非常に便利です。これらは、Fireworks PNGファイルにインスタンスとして埋め込まれている自己完結型のミニドキュメントです。エレメントを単にコピーするのではなく、シンボル、つまりはリッチシンボルを使用する利点は、ドキュメントに必要な数のインスタンスを保持できることと、シンボルに対する変更の内容が各シンボルインスタンスにすぐに反映されることです。ただし、各インスタンスを一意に配置し拡大・縮小したり、不透明度の調整や固有のフィルタを適用したりすることはできます。リッチシンボルにより、シンボルの編集操作性は実際にシンボル内にあるエレメントに拡張されます。つまり、シンボルプロパティパネルを使用して、カラー、スタイル、およびテキストまでも変更します。9スライス:この機能はデザイン業界でも比較的新しい、非常に優れた機能です。この機能については説明するよりもデモンストレーションを行うほうがわかりやすいので、Fireworks CS3のマニュアルの新機能に関する節を必ず確認してください。Fireworks CS3のシンボルは9スライスの拡大・縮小を有効にし、インテリジェントに拡大・縮小することができます。このため、オブジェクト全体が均等に、歪曲されずにコーナーとサイドの比率が維持されます。9スライスの拡大・縮小を使用した場合と使用していない場合の、簡単なパネルシンボルの拡大・縮小の例を以下に示します。図2:9スライスの拡大・縮小を使用すると、コーナーやサイドの比率を変更せずにオブジェクトを拡大・縮小できます。9スライスを有効にしたオブジェクトにどのように4本のガイドが表示され、9個の領域が作成されるかに注意してください。これらの領域は非常にインテリジェントな方法で自動的に拡大・縮小され、コーナーとサイドの比率を維持します。ご想像どおり、9スライスの拡大・縮小はインターフェイスのデザインの非常に強力な機能です。これはリッチシンボルの重要な要素であり、これを使用すると、画質や比率を損なわずに様々なシナリオでサイズ変更および再使用が可能な、非常に「インテリジェント」なコンポーネントを作成できます。この良い例がボタンです。幅やタイトルを変えたボタンに同じボタンのスタイルを再使用できます。Javascript API:これはリッチシンボルの第3の要素で、シンボルのインスタンスとそれに含まれるエレメントの橋渡しをします。Javascript APIを使用すると、元のシンボルを変更しなくても各インスタンス内のプロパティを変更できます。このプロセスについては次のページで説明します。
しかし、手作業でコードを作成したくない場合にそうする必要がなく、リッチシンボルに必要なJavascriptを作成するツールがFireworks CS3に装備されているのがわかれば喜んでいただけるのではないでしょうか
リッチシンボルの動作
2ページで説明した内容を使用すると、リッチシンボルのレシピは非常に単純です。
リッチシンボルは、普通は9スライスを有効にした状態でPNGファイルとして保存されている標準のシンボルドキュメントと、同じ名前の1つの付属
jsfファイルから構成されています。
共有ライブラリには、これら2つのファイルが一緒に保存(1)されています(図3を参照)
オブジェクトをシンボルに変換するときに共有ライブラリにシンボルを保存できます。あるいは、既存のシンボルを持つドキュメントのライブラリからシンボルを保存できます。ドキュメントのシンボルのインスタンスを作成するには、共有ライブラリパネル(2)からキャンバス(3)にドラッグアンドドロップします。
リッチシンボルのインスタンスがキャンバス上に表示されたら、シンボルプロパティパネル(4)を使用してシンボル内の
jsfファイルによって公開されるプロパティを変更します。
jsfには、手作業で作成されたか「Create Symbol Script」コマンド(これについては次のページで説明します)で生成されたかにかかわらず、名前でシンボル内のエレメントを指すコードが含まれており、カラー、ストローク属性、テキスト文字などの変更が表示されます(5)
図3:リッチシンボルのコンポーネントは共有ライブラリに一緒に保存されます。
いかがでしたか
では、リッチシンボルを作成してみましょう
この記事では、テキストとカラーを編集できる2つの状態を持つ簡単なボタンを作成します。手作業でコードを記述することはまったくありません。
リッチシンボルの作成
Fireworksでのシンボルの作成に難しい技は必要ありませんが、充実した編集操作性を実現するために準備する必要のある追加手順があります。シンボルの操作に既に満足している場合でもこれらの手順に従ってください。シンボルグラフィックを作成します。角丸矩形のオートシェイプを使用して、ソリッドカラーの矩形を作成します。角丸矩形をグループ解除します。ストロークやフィルタを使用したり、斬新な光沢を出すために上面のグラフィックをハイライトしたりして面白みを出します。プレースホルダテキストで、ボタンのラベルとして左揃えのテキストを追加します。最後に、矢印のグラフィックなどを追加します。これはボタンのアクティブ状態を示すために使用します。図4:様々なシンボルグラフィックの作成から開始します。シンボルに変換します。
すべてのエレメントを選択し、修正/シンボル/シンボルに変換を選択します(または、F8を押します)
シンボルに名前を付け、「9スライスの拡大・縮小のガイドを有効にする」がオンであることを確認します。「共有ライブラリに保存」をオンにできますが、この後変更を行ってから保存し直すため、ここで保存する必要はありません。図5:シンボルに変換ダイアログボックスでシンボルに名前を付けます。9スライスガイドを設定します。ここでの目的は、図6に示すように、コーナーを形成するピクセルが4本のガイドのコーナーの交点内に入るようにすることです。また、この例では矢印のグラフィックが左端のガイドの左側になるようにし、センタースライス内で水平方向に伸縮されないようにする必要があります。都合のよいことに、テキストはどこに配置されてもパスに変換されない限り伸縮されることはありません。図6:9スライスガイドを設定します。9スライスガイドを定義したら、「完了」をクリックしてシンボルドキュメントを閉じ、シンボルが意図したとおりに拡大・縮小されているかをテストします。調整が必要な場合もあります。編集できるようにする要素に名前を付けます。これは、リッチシンボルでグラフィックを作成するときに覚えておく必要がある最も重要なことです。作成したシンボルオブジェクトをダブルクリックし、シンボルを編集ダイアログボックスを開き、レイヤーパネルで定義したレイヤーを確認します。シンボルプロパティパネルで変更するエレメントには、わかりやすい名前を付ける必要があります。図7:編集できるようにする必要のあるエレメントに名前を付けます。シンボルを共有ライブラリに保存します。手順2でシンボルを共有ライブラリに保存した場合は、ドキュメントでシンボルに対して行った変更内容は共有ライブラリに自動的に保存されないことに注意することが重要です。ライブラリパネルを開き(ウィンドウ/ライブラリ)、シンボルを選択します。
オプションメニュー(ライブラリの右上)から、「共有ライブラリに保存」を選択します(図8を参照)
図8:コンテキストメニューから「共有ライブラリに保存」を選択します。さらに変更を行います。シンボルをさらに変更した場合は、忘れずに共有ライブラリに保存してください。共有ライブラリのシンボルを更新すると、キャンバスに単にドラッグアンドドロップするだけでデザインに新しいインスタンスを作成できます。忘れてはいけないのは、ドキュメントのライブラリパネル(Component Libraryパネルと混同しないようにしてください)には現在のプロジェクトで使用されたすべてのオブジェクトのリストが保持されているということです。キャンバスにシンボルの新しいインスタンスをドラッグすると、Fireworksでは、ライブラリの競合を解決するように求めるプロンプトが表示されるので、必ず「既存の項目を置換」を選択してシンボルを更新します。シンボルがドキュメント内に保持されると、新しいインスタンスを作成するために共有ライブラリを使用し続ける必要はなく、ドキュメントのライブラリを使用できるようになります。共有ライブラリにシンボルを保存しているときは、「再読み込み」ボタンを使用して新しく保存したシンボルがパネルに反映されていることを確認することに慣れておくことも必要です。図9:シンボルに変更を行った後で「再読み込み」ボタンをクリックします。
スクリプトの作成
ここまでのチュートリアルで、特に、充実した編集可能なプロパティのシンボルを準備しました。ここでは、これを機能させる。jsfスクリプトを作成します。jsfを手作業で記述せずに作成するには、シンボルスクリプトを作成パネルを使用します。シンボルスクリプトを作成パネルを開きます。コマンド/シンボルスクリプトを作成を選択します。
このパネルを使用すると、jsfファイルを簡単に作成してリッチシンボルに編集操作性を追加できます。」ボタンをクリックし、共有ライブラリフォルダを探し、保存したシンボルを選択します。シンボルスクリプトを作成パネルには、リッチシンボルの編集可能なプロパティを定義するときに使用する4つのフィールド(「要素名」、「属性」、「プロパティ名」、「値」)があります。図10:シンボルスクリプトを作成パネルでリッチシンボルの編集可能なプロパティを定義します。エレメント名を選択します。エレメント名を選択するには、「+」ボタンをクリックします。「要素名」フィールドにポップアップメニューのある新しい行が追加されます。このポップアップメニューには、前の節の手順4で名前を付けた各エレメントが表示されます。項目が何も表示されない場合は、前ページの手順5で説明したように、エレメントに名前を付けるだけでなく、シンボルを共有ライブラリに保存したことを確認してください。これは、青一色の角丸矩形のオートシェイプです。属性を選択します。属性とは、シンボルプロパティパネルからアクセスできるようにする、エレメントのJavascript APIプロパティです。大部分のプロパティは、ほとんど説明の必要がありません。図12:シンボルプロパティパネルでアクセスできるようにする属性を選択します。プロパティ名を選択します。プロパティ名とは、シンボルプロパティパネルに表示される名前です。
追加するプロパティによってボタンフェイスの塗りのカラーが調整されるので、名前は「フェイスカラー」などとするとわかりやすいでしょう
図13:名前を割り当てます。この名前がシンボルプロパティパネルに表示されます。デフォルトのカラー値を選択します。一貫性を維持するためにデフォルトのカラーを角丸矩形のオートシェイプと同じ青にします。ただし、どのような色にすることもできます。図14:リッチシンボルにデフォルトのカラー値を指定します。これで、シンボルの完全に編集可能なプロパティが作成されました。
テストを行う前に、同じ手順を使用してさらに機能をすばやく追加してみましょう
「+」ボタンを押して、新しいプロパティを追加します。textCharsに属性を設定し、「テキストラベル」などの適切なプロパティ名を付けます。デフォルト値を入力します。図15:編集可能なテキストプロパティを追加します。このプロパティを使用して、各インスタンスのテキストラベルを変更できます。これはボタンの重要な特性です。最後に、矢印のグラフィックを使用して簡単なトグル状態を作成します。「+」ボタンを使用して、新しいプロパティを追加します。図16:簡単なトグル状態を追加します。スクリプトを保存します。
「保存」をクリックすると、シンボルのPNGファイルと同じ場所に
jsfファイルが生成されます。jsfファイルを開き、コードを確認します。共有ライブラリのシンボルにそれに関連付けられている編集可能なプロパティがあっても、キャンバスに現在表示されているシンボルには新しい。jsfスクリプトは自動的に継承されないことに注意することが重要です。シンボルを更新するには、ドキュメントの「ライブラリ」(ウィンドウ/ライブラリ)からシンボルを削除し、共有ライブラリから新しいインスタンスをドラッグします。あるいは、テスト時に新しい空白のドキュメントを作成し、そのキャンバスに共有ライブラリからインスタンスをドラッグすることもできます。初めてのリッチシンボルができました。
古いシンボルのドキュメントをクリアし、共有ライブラリの新しいインスタンスを配置してから、シンボルを選択し、シンボルプロパティパネルを開きます(ウィンドウ/シンボルプロパティ)
それぞれに一意のフェイスカラー、ラベル、アクティブ状態を設定して、リッチシンボルの様々なサイズのインスタンスを作成できます。図17:リッチシンボルの一意のインスタンスを簡単に作成できます。リッチシンボルを使用するときに理解しておく必要のあるヒントがいくつかあります。その1つは、新しい「シンボルを入れ替え」コマンドです。このコマンドにアクセスするには、キャンバスのシンボルを右クリックし、ポップアップメニューから「シンボルを入れ替え」を選択します。このコマンドは可能な限り多くのプロパティを保持し、他のシンボルとインスタンスを入れ替えます。1つのコンポーネントに複数のグラフィックスタイルがあり、サイズやテキストラベルなどの属性をリセットせずにスタイルを変更するときに、このコマンドは非常に便利です。もう1つの便利なツールは「変形の解除」コマンド(修正/変形/変形の解除)です。このツールを使用するとシンボルはデフォルトのサイズに戻りますが、設定した属性は保持されます。リッチシンボルの作業を続けて、プロパティを追加および編集したり、シンボルグラフィックを変更したりするときは、次のような必要なワークフロー手順をよく理解しておくことが重要です。シンボルを共有ライブラリに再度保存します。シンボルグラフィックを変更する場合、ドキュメントのライブラリ(ウィンドウ/ライブラリ)を使用して共有ライブラリに再度保存する必要があります。保存を行わないと共有ライブラリ内のコピーには変更内容が反映されません。共有ライブラリを再度読み込みます。共有ライブラリはFireworks内から保存を行ったときには必ず自動的に再度読み込まれますが、念のためにパネルの「再読み込み」ボタンをクリックすることをお勧めします。
jsfファイルを手作業で変更する場合は、共有ライブラリを手作業で再度読み込んでから
jsfファイルをシンボルに登録します。ドキュメントのライブラリから現在のシンボルを削除します。この時点では、リッチシンボルは共有ライブラリ内のコピーで完全に更新されていません。
シンボルのグラフィックを更新することはできますが、jsfファイルはドキュメントにいったん読み込まれると変更不可能な状態で保存されます。したがって、新しい。jsfファイルを登録するには、必ずドキュメントのライブラリ(ウィンドウ/ライブラリ)から古いシンボルを削除してから、スクリプトに対する変更内容をテストします。共有ライブラリから新しいインスタンスをドラッグします。前述の3つの手順を実行すれば、共有ライブラリからシンボルの新しいインスタンスを作成してテストできます。
次のステップ
当然のことですが、この単純な2つの状態を持つ色付きのボタンは初めの一歩にすぎません。
多くの編集可能なプロパティをシンボルに追加できますし、jsfファイルに興味を持ち手作業でコードを少し記述しようとすればもっと高度なことも可能です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
Fireworksを使用したビットマップイメージのベクター化
ピクセルベースのイメージとパスベースのイメージは従来、それぞれスタイルとテクニックという異なる分野に厳密に分けられていました。しかし、この常識は崩れ去ろうとしています。Fireworksを使用することによって、プログラムやモードを切り替えることなく、それぞれの種類のグラフィックの利点を活用できるようになります。その結果、ワークフローの効率が改善するだけでなくクリエイティブな可能性の世界が広がります。特に、Fireworksベクターオブジェクトは、ビットマップオブジェクト、他のベクターオブジェクトおよびこれら両方のオブジェクトを組み合わせたグループについて、「巨大なクリッピングパス」として使用できます。この記事では、Fireworksビットマップオブジェクトおよびベクターオブジェクトを併用して実用的なマスク効果を簡単に短時間で生成する方法について紹介します。この記事に書かれた操作を行うには、以下のソフトウェアが必要です。
この記事のために必要な予備知識
この記事は、ベクターグラフィックとビットマップグラフィックの基本概念について実践的な知識を持っている読者向けに記述されています。
ツールがいくつかのタイプに分かれていることに気付くことでしょう
これらのツールアイコンのほとんどはFireworks以外のソフトウェアの操作時でも見慣れているものなので、どのような機能があるかは大体想像できると思います。このツールボックスは、クリックするだけで必要なツールにアクセスできるスイスアーミーナイフのように便利なものです。ツールボックスのビットマップツールのセクションから絵筆ツールを使用し、イメージにぼかしを付けてみてください。また、多数あるシェイプツール(形状を表示して選択するには、現在選択されている形状の隣の小さい矢印を使用します)の1つであるベジエペンツールを使用し、ベクターグラフィックを追加してください。
次は、レイヤーパネルの重ね順を変更してみてください(ウィンドウ/レイヤー)
選択されたツールおよびグラフィックのプロパティはプロパティインスペクタに表示されます(ウィンドウ/プロパティ)
プロパティインスペクタまたはツールボックスいずれかでカラーオプションを使用すると、色の選択を変更できます。難しいことは何もありません。
ビットマップの塗り:ビットマップパターンを使用したベクターシェイプの塗りつぶし
同じキャンバス上でビットマップオブジェクトとベクターオブジェクトを結合したら、それらを同じグラフィック内で結合してみましょう
Fireworksには、ビットマップ塗りのシームレスなテクスチャを集めた有用なライブラリが付属しており、ユーザ独自のテクスチャを追加することもできます。まず、ベクターツールで簡単な形状をいくつか作成します。ツールボックスのカラーセクションやプロパティインスペクタでは、単色の塗り、グラデーション塗り、Webディザ塗り、パターン塗りを作成するためのオプションがあります。パターン塗りを選択すると、指定されたビットマップパターンのライブラリが、タイル上に並んだサンプルイメージとともに表示されます。好きなパターンを選択します。パターンを選択した後、ベクターオブジェクトには常にビットマップ塗りが適用され、キャンバス上にはパターン塗りのスケールと回転を操作するための塗りハンドルとともにベクターオブジェクトが表示されます。形状の選択を解除すると、ハンドルが非表示になります。ハンドルを再表示するには、形状をもう一度選択します。図1:ベクターシェイプは、ビットマップ塗りを適用した後もさらに操作できます。
ところで、ツールボックスの「ベクター」セクションにテキストツールがあることに気付いたでしょうか
Fireworksではテキストがベクター要素として処理され、テキストの編集操作性を維持したままあらゆる種類のテキストボックスについてパターンの塗りを簡単に選択できます。また、スケール、ストレッチ、歪曲、ストローク、追加といった効果も選択できます。このメニューはAdobe Photoshop®のフィルタメニューと似ていますが、Fireworksでは、プロパティインスペクタの右側のフィルタボックスからフィルタを適用すると、フィルタの適用順序をいつでも削除、調整および変更できます。フィルタメニューから適用するフィルタとは異なり、プロパティインスペクタの右側のフィルタボックスから適用するフィルタは、フィルタ適用時にグラフィック要素に加えた変更を取り消すことのできるフィルタであり、Photoshopの調整レイヤーと似ています。
マスクとしてペースト:ディストレス効果のためのクイックテクニック
Fireworksでは、あるグラフィックを別のグラフィックのマスクとして使用できます。これにはいくつもの使い道があります。円形のサムネイルイメージを作成するには、円形のベクターイメージでサムネイルイメージをマスクします。背景からオブジェクトを型抜きするには、ベジエペンツールでアウトラインをなぞり、生成されるベクターオブジェクトをマスクとして使用します。最初に2つの任意のグラフィック要素を用意します。1つはマスクシェイプにし、もう1つはマスクオブジェクトの領域内だけに表示されるようにします。マスクを適用するオブジェクトの上にマスクオブジェクトを配置し、マスクオブジェクトを切り抜き(CommandキーまたはControlキーを押しながらXキーを押す)、編集/マスクとしてペーストを選択します。図2:1つのオブジェクトを別のオブジェクトのマスクとして使用します。マスクするオブジェクトを切り抜き、編集/内部にペーストを選択しても、同様の効果を得ることができます。
テキストにディストレス効果を適用する場合はまず、インクテクスチャを独自に作成します(黒いページをコピー機でコピーし、紙をくしゃくしゃにしてスキャナーで取り込んでもかまいません)
インクテクスチャの上にテキストボックスを配置します。編集/カットを選択し、編集/マスクとしてペーストを選択します。
図3:テキストのディストレス効果の生成
オブジェクトを選択し、編集/グループ解除を選択すると、オブジェクトを分割できます。レイヤーパネルでは、鍵のアイコンをクリックしてオブジェクトの組み合わせのロックを解除したり、マスクオブジェクトやマスクされたイメージを移動または操作したりできます。Fireworksでは、マスクのパスアウトラインやグレースケール値を使用して、エッジをぼかしたマスクやさまざまな透明度のマスクを作成できます。
「パスの結合」機能とシークレットパスパネル
このツール使用すると、1つのパスを他のパスから型抜きしたり、2つ以上のパスを合体したり、パス間の交差する部分を検出したりすることができます。
Fireworks CS3では、ウィンドウ/「その他」メニューから新しいパスパネルが利用できるようになりました(「その他」サブメニューには、「カラーパネル」という控えめなラベルからは想像できない新登場の画期的な色選択およびブレンドツールがあります)
パスパネルには、クリックするだけでアクセス可能なさまざまなパスツールやポイント編集ツールがあります。パスの結合のオプション(修正/パスの結合を選択してアクセスすることもできます)は、パスに変換された操作タイプなどに役立ちます。また、複数のピースを組み合わせることで複雑なクリッピングオブジェクトを作成することもできます。
そのユニークなアプリケーションの1つに「デジタル寄せ木細工」の作成があります(寄せ木細工とは、板材を組み合わせて模様を作る技術です)
Fireworksでベクターシェイプを操作することにより、写真のようにリアルなイメージをプレビューしたり、Illlustratorファイルに書き出してコンピュータ制御されたレーザーカットサービスに送信したり、高精度で実際の板材を型抜きしたりできます。
デジタル寄せ木細工による模様を描くには:
モノクロ写真を用意します。まずシャドウ部分をなぞっていきます。色調は何でもかまいません。ここでは、形状を定義することが重要です。ここでは淡い色調を追加しています。大まかなシャドウがなぞられました。Fireworksでは、異なる領域のエッジを後の手順で完全に一致させられるように、ある形状から別の形状を切り抜くことができます。イメージ内で曲線を定義しているペンポイントが表示されます。
次は、濃すぎもせず薄すぎもしない中間の色調を追加してみましょう
写真の中間調を確認してトレースできるように、強調表示された領域を含んでいるレイヤーを一時的にオフにすることができます。最初に同じような色の領域をまとめてなぞることで、異なる領域のアウトラインを正確に分割します。
修正/パスの結合/合体を選択し、次に修正/パスの結合/型抜きを選択してさまざまな形状を別の形状から型抜きします(強調表示された部分をシャドウから型抜きすると、強調表示の形状が失われるので、型抜きで出来た空白の部分に、型抜き部分をコピーして再び貼り付けることを忘れないでください)
元々のイメージが手作業で生成されたことを考えると、形状によっては非常に複雑なものがあります。小さな宝石片を糸のこで巧みに切り出す技術者のテクニックに敬意を表します。ここでは、ユーザ独自のウッドテクスチャを集めたパーソナルライブラリは使用しません。好きなテクスチャでシャドウ、中間調、強調表示された形状を塗りつぶしてください。Fireworksでは、ベクトルイメージか、ビットマップイメージかに関係なく、すべてのオブジェクトにカラー調整フィルタを適用できます。したがって、Fireworksライブラリのウッドテクスチャを使用して形状を塗りつぶし、Adjust Levels、色相、彩度、明るさといったオプションを使用して、薄い色や濃い色、たとえば薄いベージュやそれよりも濃い茶色の文字をそれぞれのグループに適用することができます。背景に円を追加します。この円は木製のキャンバスのようなもので、このキャンバスにピースをはめ込んでいきます。1つのオブジェクトとしてマスキングできるように、円をコピー(CommandキーまたはControlキーを押しながらCキーを押す)してすべての表示要素をグループ化し、編集/マスクとしてペーストを選択し、模様のクリッピングマスクとして背景の円を使用します。ジャンゴ ラインハルトの丸いピックガードが出来上がりました。
ベクターマスクは、Fireworksに用意されている多数の有用な機能の一つですが、Fireworksの最大の強みは、ベクターグラフィックとビットマップグラフィックの間の従来の境界線を破壊したという点でしょう
1つのプログラムでベクターツールとビットマップツールの両方を使用できることはもちろん便利ですが、これまでにない新しい方法でこれらのツールを融合したことで、多くの可能性が開拓されるでしょう
Fireworksは、昔ながらの親しみやすさと快適性を備えながら従来の設計方法を一新させるツールです。
次のステップ
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
ベベル(内側)、光彩(内側)、明るさ ・ コントラスト、および色相 ・ 彩度の各フィルタの使用方法を学んで、自然の結晶と同じくらい美しい結晶を作成します。ベベル(内側)によって、結晶に3Dの立体感が生まれ、光彩(内側)によって光沢を出すことができます。明るさ ・ コントラスト、色相 ・ 彩度では最後の仕上げを行います。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
この記事のために必要な予備知識
結晶を作成するには、次の手順に従います。
ペンツールで結晶のシェイプを描きます(図1を参照)
そのシェイプに明るい色の線を加えて、同じ色相の暗めの影を塗ります。
図1: 塗りと線で描かれた基本的な結晶のシェイプ
シェイプに、光彩(内側)およびベベル(内側)のフィルタを交互に適用して、結晶に3Dの立体感をつけます。
フィルタを追加するには、シェイプを選択して、次に、プロパティインスペクタの「フィルタを編集」ボタンをクリックし、シャドウとグロー/光彩(内側)、ベベルとエンボス/ベベル(内側)をそれぞれ選択します(図2を参照)
手順4のライブフィルタパネルで追加したフィルタをクリックして、各フィルタに以下の設定を行い、3D効果を出します(図3を参照)
3D効果をつけた結果、オベリスクのような形をした結晶ができます。この段階では人工的な外観で自然な感じはしませんが、これから、より自然な結晶のシェイプにしていきます。注意: 結晶の中央に「フラット」な箇所がある場合は、シェイプを調整する必要があります。ダイレクト選択ツールを使用して、シェイプの4つの外角を中央に向かって動かして、フラットな箇所がなくなるようにします。
形を崩さずに結晶を大きくするには、結晶を選択してから拡大・縮小ツール/描画を選択し、次に、左ハンドルまたは右ハンドルを外側にドラッグします(図4を参照)
サイズを小さくする場合は、ハンドルを結晶に向かってドラッグします。今度は、最上部のピラミッド型を崩さずに、結晶の高さを変更します。
ダイレクト選択ツールを選択し、次に、結晶の底部を選択して、キーボードの上向き矢印キーを押して高さを上げるか、または下向き矢印キーを押して高さを下げます(図5を参照)
図5: 結晶の高さの変更
様々なサイズの結晶のコピーを作成するには、複製/拡大または縮小を選択して、手順4の説明のとおりにシェイプのハンドルをドラッグします。
結晶を回転させるには、結晶を選択してから手順7の説明のとおりに拡大・縮小ツールを使用するか、または変更/変形/数値を入力して変形/回転を選択します(図6を参照)
図6: 拡大・縮小ツールを使用した結晶の回転
注意: 結晶のレイアウトをできるだけリアルに作成するには、インターネットで本物の結晶の写真を見て参考にします。最後に、結晶に明るさと輝きをつけるために、さらに2つのライブフィルタの、明るさ ・ コントラスト、色相 ・ 彩度を適用します。すべての結晶をグループ化して、プロパティインスペクタの「フィルタを編集」ボタンをクリックし、次に、カラー調整/明るさ ・ コントラスト(図7)およびカラー調整/色相 ・ 彩度(図8)を選択します。フィルタごとに、以下の画像で示す設定を行います。
図7: 明るさ ・ コントラストフィルタ
結晶の外観はかなり自然になっています(図9)
図9: 明るさ ・ コントラスト、色相 ・ 彩度が適用された結晶の集まり
次のステップ
ここまでのチュートリアルで、Fireworksを使用してリアルな結晶を作成するための基本的な方法を理解しました。可能性は無限に広がっています。様々な色、背景、または効果を使用して、無限のバリエーションを作成することができます。例えば、スムーズ(反転)の代わりにベベル (内側)を使用したり、光彩 (内側)を省略したりすることができます。また、テクスチャ、パターン、およびブレンドモードを追加することもできます。いろいろ試してみてください。このチュートリアルで紹介したテクニックを使用すると、エジプトのオベリスク、木製ポスト、屋根を作成できます。以下に、様々なレイアウト、色、背景を使用した例を少しだけご紹介します。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
改善されたワークスペースとユーザーインタフェイス
ワークスペースの新機能
ファイル読み込みや他のアドビ製品との連携に関する改善点
新しい描画ツール
印刷用に表示
エキサイティングなアプリケーションを作成するのに役立つ新しいツールが追加され、Adobe Creative Suite 3に同梱されている他のアドビ製品との連携も強化されています。そのため、ある程度Flashに関する知識を持っているという前提で話をしています。いつでもFlash CS3にアップデートする準備ができているというFlash好きな方は、すぐにでも読み始めてください。
0でコードを書きたいという人でも、まずはこの記事を通して、Flash CS3を使い始める上で知っておくべきことを学びましょう
この記事では特に以下の項目について解説しいてます。
ワークスペースに関する変更点
ユーザーインターフェイスの新しい特徴、パネルの新しい操作方法、Flashを使いやすくするためのワークスペースの最適化方法など
オーサリングに関する新機能
境界ボックスのカラーのコントロール方法、新しいコピー&ペースト機能、9スライスの強化点など
PSDファイルやAIファイルをサポートした、ファイル読み込み機能の改善
描画ツールに関する改善点
強化されたペンツールや、新しく追加された簡単にシェイプを作成できるプリミティブ描画ツールなど
0で作成する方法の違い
0のドキュメントクラスとその使い方
この記事では、以下のソフトウェアとサンプルを使用しています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
改善されたワークスペースとユーザーインタフェイス
ワークスペースの新機能
ファイル読み込みや他のアドビ製品との連携に関する改善点
新しい描画ツール
印刷用に表示
0ベースで作成されていました。0コンポーネントに変わりました。0が導入されとはいえ、すぐに移行できる人ばかりではありません。
0で制作する機会もあるでしょう
新規ファイルを作成する際に、ファイルタイプから「Flashファイル(AS2
0)」を選ぶと、コンポーネントパネルにはV2コンポーネントが表示されます。
0コンポーネントが表示されます(図41)
0コンポーネントのリスト
0コンポーネントは、V2コンポーネントに比べてより軽く、スキンを変更しやすくなっています。0コンポーネントには、新しいコンポーネントが追加されてますし、逆に削除されているコンポーネントもあります。
V2コンポーネントのUIフォルダ内にあったコンポーネントで削除されたものがありますが、もしそれらを使用したい場合は、ファイルタイプを「Flashファイル(AS2
0)」として作成してください。0コンポーネントではUILoaderコンポーネントと名前が変更されています。コンポーネントの機能としては同じです。0を使うという点です。
実際に両方の方法で同じサンプルを作成して、その違いを確認してみましょう
0ベースのV2コンポーネントを使う方法です。0ベースの新規FLAファイルを作成します。コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。
0コンポーネントを使って作ってみましょう
0ベースの新規FLAファイルを作成します。コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。0コンポーネントとの違いが分かっていただけたと思います。また、Flashデベロッパーセンターの Flash クイックスタートでも、新しいコンポーネントにつてい解説しています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
改善されたワークスペースとユーザーインタフェイス
ワークスペースの新機能
ファイル読み込みや他のアドビ製品との連携に関する改善点
新しい描画ツール
印刷用に表示
それにともない、アクションパネルやスクリプトウィンドウ、そしてデバッグツールの機能も強化されました。0のサポートはもちろんこと、効率よくコーディングできるようになっています。
それでは、個々の特徴を見ていきましょう
アクションパネルやスクリプトウィンドウでは、コードの任意の範囲を折り畳んで隠すことができます。この機能を使用するには、まず折り畳みたいコード部分を選択してハイライト表示します。すると、コードと行番号の間にあるスペースに2つの三角マークとラインが表示されます。
この状態で、三角マークをクリックするとコードが折り畳まれ隠れてしまいます(図42)
図42: コードを折り畳んで隠すことができます。再度コードを表示したいときは、三角マークをクリックします。Tips: コードを隠す方法は、上記以外にも、アクションパネルやスクリプトウィンドウの上部にあるボタンを使う方法もあります。この場合、括弧内のコードを折り畳んで隠します。ボタンをクリックしたときにどのコード部分が隠れるかは、カーソルの位置や、コードの折り畳みの状況によって決まります。隠したコードを表示するには、「すべてを展開」ボタンをクリックします。図43: ボタンを使ってコードを隠したり表示したりできます。また、コードの任意の範囲をコメントにするボタンもあります。
コメントにしたいコード部分を選択して、「ブロックコメントを適用」ボタンか「行コメントを適用」ボタンをクリックします(図44)
図44: コードをコメントにすることができます。コメントを解除するには、「コメントを削除」ボタンを使います。
おそらく、スクリプト関連のパネルに施された機能強化の中で一番素敵な機能は、コンパイルエラーパネルのダブルクリックエラー表示機能でしょう
コンパイルエラーパネルでは、以前のバージョンと比べて、エラー内容をより詳しく説明するようになりました。さらに、エラー項目をダブルクリックすると、スクリプトウィンドウ内の該当コード部分が自動でハイライト表示されます。
以下のサンプルコードで試してみましょう
このコードにはあらかじめエラーを入れています。
デバッグを行うと、どこにエラーがあるのかを、コンパイルエラーパネルが教えてくれます(図45)
では、何を使いましょう
エラー項目をダブルクリックすると、該当するコード部分をハイライト表示してくれます(図46)
図46: コンパイルエラーパネルの項目をダブルクリックすると、該当するコードがハイライト表示されます。スクリプトウィンドウからFlashアプリケーションをチェックしたい場合に便利な機能です。ActionScriptファイルと関連づけるには、そのFLAファイルを開いておかなければなりませんが、それでも一々FLAファイルを選んでチェックするよりは効率的です。コーディング/デバッグ環境は、Flash 8に比べて非常に改善されています。以前なら、エラーのあったコードを自分で探さなければなりませんでした。もう1つ重要な特徴があります。それは、ドキュメントクラスです。
<ドキュメントクラスの作成>
Flash CS3では、FLAファイルに対してドキュメントクラスを作成することができます。ドキュメントクラスは、メインのタイムラインと関連づけられたクラス定義です。タイムラインが初期化される際に、ドキュメントクラスが作成されます。
ドキュメントクラスは、プロパティインスペクタで設定することができ、ドキュメントクラス欄にその名前を入力します(図48)
図48: プロパティインスペクタのドキュメントクラス欄にドキュメントクラスの名前を入力します。ドキュメントクラスは以下のように使用します。flaと同じフォルダ内に保存します。asに以下のコードを記述します。flaでは、何も選択せずに、プロパティインスペクタのドキュメントクラス欄にMainMovieと入力します。ノート: ドキュメントクラス欄では、as拡張子を付けないでください。保存して、ムービーのプレビューを行います。
<シンボルの基本クラス>
Flash CS3では、ライブラリ内のシンボルにクラスと基本クラスを指定することができます。この機能により、シンボルのインスタンスをダイナミックに作成することが可能となりました。以下は、その手順です。何かグラフィカルな要素があるムービークリップを作成します。ライブラリ内のムービークリップを選択して、パネルメニューからリンケージを選ぶと(あるいは、右クリックしてコンテキストメニューからリンケージを選びます)、リンケージプロパティダイアログが開きます。図49: クラス欄と基本クラス欄を入力します。
では、このFLAファイルで使用するDraggableClipクラスを作成しなければなりません(今回は、記事のサンプルとして用意してあります)
ノート: 新規シンボルダイアログやシンボルに変換ダイアログにも基本クラス欄があり、指定できます。flaと同じフォルダ内に入れます。flaに戻り、ムービーのプレビューを行います。ムービークリップをドラッグしてステージ上を動かせるはずです。
<強化されたデバッガ>
0のコードを簡単に検証できます。デバッグを実行すると、ワークスペース全体がデバッグ環境に変わり(デバッグワークスペースと呼びます)、デバッグ用のFlash PlayerでSWFファイルが表示されます。
アクションパネルやスクリプトウィンドウ、変数パネル、デバッグコンソールパネル、出力パネルです(図50)
各パネルの機能や使い方は、これまでと同じですが、以前よりフレキシブルなデバッグ環境となっています。
図50: 新しいデバッグ環境
デバッグワークスペースでデバッグ作業を楽しんでください。Flash CS3でデバッグを行うには、FLAファイルやASファイルを開いて、メニューから「デバッグ/ムービーのデバッグ」を選ぶだけです。
ASファイルで、ムービーのデバッグを実行するには、あらかじめFLAファイルと関連づけておく必要があります(図47)
ノート: ASファイルのターゲットメニューからFLAファイルを選ぶには、該当するファルを開いておく必要があります。デバッグを終了するには、メニューから「デバッグ/デバッグセッションを終了」を選びます。0ベースのSWFファイルをもデバッグすることが可能です。
0としてのモーションのコピー>
デベロッパーの方なら、タイムラインアニメーションをコードアニメーションに変換する仕事を依頼されたこともあるでしょう
複雑なアニメーションを複雑なコードで再現するとなると、非常に難しく手間のかかる作業です。でも、そんな苦労をしなくても済むようになりました。メニューオプションを選ぶだけで、コードができあがるのです。0コードに書き換えた状態でコピーして、別なシンボルに適用することができます。コードは、タイムラインコードやクラスファイル用として適用することが可能です。0としてコピーして、別なシンボルに適用させる手順です。新規シンボルあるいはグループを作成して、ステージ上のレイヤー1に配置します。タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。新規レイヤー(レイヤー2)を追加します。レイヤー2に新規シンボルあるいはグループを作成します。
ライブラリからもう1つインスタンスを追加してもいいでしょう
0としてのモーションのコピー」を選びます。Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします。
ActionScriptコードを適用するインスタンのインスタンス名にするといいでしょう
レイヤー2に追加したインスタンスを選択して、プロパティインスペクタに先ほどのインスタンス名を入力します。新規レイヤー(レイヤー3)を追加します。
ムービーのプレビューを行う前に、レイヤー2がレイヤー1と同じフレーム数だけあるかを確認します(アニメーション中に、シンボルが消えてしまわないようにします)
タイムラインでフレームを追加するには、フレームを選んで、F5を押します。ムービーのプレビューを行います。レイヤー1とレイヤー2が同じアニメーションとなれば成功です。1つはタイムラインのアニメーション、もう1つはコードのアニメーションです。0は、堅実で健老なプログラミング言語です。
0も馴染みやすいでしょう
0は、以前のバージョンより分かりやすくなっていますし、コードの再利用もできます。
膨大なデータを扱う複雑なアプリケーションを制作することもできるでしょう
0を使用することは可能です。
0を使い始めてまず気づくのが、シンタックスの違いでしょう
新しいクラスがたくさん追加されていますし、 Tweenクラスなどの既存のクラスもアップデートされています。また、コードでインスタンスを作成する際に、新しいシンボルタイプを使うこともできます。たとえば、スプライトというタイムラインのないムービークリップを作成できます。0をサポートしています。変更点がかなり多く、この記事ではカバーしきれません。本が1冊かけるくらいのボリュームです。この記事では、基本的なところを紹介します。
0の違いを見てみましょう
ステージ上にボタンがあり、そのインスタンス名はmyBtnです。0の場合、たとえば、メインのタイムラインに以下のようなコードを書きます。0では、少し違います。以下の手順でインタラクティブボタンを作成します。簡単なボタンを作成します。インスタンスを選択して、インスタス名をmyBtnとします。新規レイヤーを作成して、レイヤー名をアクションとします。アクションパネルを開いて、アクションレイヤーの1フレーム目を選び、以下のActionScriptコードを記述します。ムービーのプレビューを行います。おまけとして、ゼロからコードで作るボタンのActionScriptコードを以下に紹介しておきます。0ベースの新規ファイルを作成して、以下のコードをタイムラインの1フレーム目に記述します。ActionScriptに関しては、シンタックスから、パフォーマンス、クラスまでと様々な点で機能強化や改善が施されています。たくさんありすぎて、ここではその触りしか紹介できていません。0のプログラミング」 項目を参照してください。
<さらに学習したい方へ>
0についてもっと詳しく知りたい人は、以下をおすすめします。0」をテーマとした記事を予定しています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
改善されたワークスペースとユーザーインタフェイス
ワークスペースの新機能
ファイル読み込みや他のアドビ製品との連携に関する改善点
新しい描画ツール
印刷用に表示
エキサイティングなアプリケーションを作成するのに役立つ新しいツールが追加され、Adobe Creative Suite 3に同梱されている他のアドビ製品との連携も強化されています。そのため、ある程度Flashに関する知識を持っているという前提で話をしています。いつでもFlash CS3にアップデートする準備ができているというFlash好きな方は、すぐにでも読み始めてください。
0でコードを書きたいという人でも、まずはこの記事を通して、Flash CS3を使い始める上で知っておくべきことを学びましょう
この記事では特に以下の項目について解説しいてます。
ワークスペースに関する変更点
ユーザーインターフェイスの新しい特徴、パネルの新しい操作方法、Flashを使いやすくするためのワークスペースの最適化方法など
オーサリングに関する新機能
境界ボックスのカラーのコントロール方法、新しいコピー&ペースト機能、9スライスの強化点など
PSDファイルやAIファイルをサポートした、ファイル読み込み機能の改善
描画ツールに関する改善点
強化されたペンツールや、新しく追加された簡単にシェイプを作成できるプリミティブ描画ツールなど
0で作成する方法の違い
0のドキュメントクラスとその使い方
この記事では、以下のソフトウェアとサンプルを使用しています。
改善されたワークスペースとユーザーインタフェイス
共通した外観であれば、複数の製品に渡って作業する場合でも迷わず作業することができるでしょう
Flashのワークスペースでは、日々のワークフローを効率化しようと、著しい改善が施されています。
非常に多くの変更点がありますが、中でもFlash CS3を始めて起動させたときにまず目につくのが、新しいパネルやタブの外観でしょう
ツールパネルは、初期状態では1列で表示されるようになりました(図1)
画面での作業エリアを広く使えます。図1: 初期状態では1列で表示されます。ツールパネルの上部にある二重矢印をクリックすれば2列表示に変更できますし(図2)、再度クリックすれば1列表示に戻すことができます。図2: ツールパネルの上部にある二重矢印をクリックすれば2列で表示されます。ツールパネルには新しいツールが追加されました。詳しくは、この記事の「新しい描画ツール」で解説します。
<パネルのドッキングとドッキング解除>
Flash CS3では、以前のバージョンに比べて、より簡単で柔軟なパネルのドッキング操作が可能です。
パネルのタブをクリックしながらドラッグするだけで、パネルの位置を変更することができます(まさに、Flashに欲しかった機能ですね)
たとえば、ワークスペースの下の方に表示されるプロパティインスペクタ(メニューの「ウィンドウ/プロパティ/プロパティ」で表示)には、初期状態では3つのパネルがグループ化されていますが、タブをクリックしながらドラッグするだけでタブの並びを変更することができますし、ステージの右側にあるドックへ移動することもできます。パネルを移動させるには、たんにタブをクリックして新しい位置へとドラッグするだけです。Flash 8ではコンテキストメニューでパネルの移動先を指定していました。それと比べると、非常に簡単かつ素早くパネルを移動できるようになりました。パネルをドッキングから解除するには、そのタブをクリックしながらドラッグして、ドッキングされている位置からワークスペースの任意の場所に移動させます。再度ドッキングさせるには、タブをドラッグして他のパネルのグループの位置や、パネルの上下に移動させます。パネルの挿入位置(他のパネルの上下や、グループ内)は、青いドロップゾーンで示されます。他のパネルの上下の位置に移動させる場合は、線上のドロップゾーンが表示されます。他のパネルとグループ化する場合は、パネルのタイトルバー部分が青でハイライト表示されます。ドック内のカラムを増やすこともできます。パネルをドラッグして、現在のカラムの左側に青いドロップゾーンが表示されたら離します。
すると、左側に新しいカラムができ、そこにパネルがドッキングされます(図3と図4)
図3: ドック内に2つ目のカラムを作成するには、パネルをドラッグして図のように青いドロップゾーンが表示されたら離します。図4: コンポーネントパネルは2つ目のカラムにドッキングされました。Tip: パネルをドッキングから解除するには、そのタブをクリックしながらドラッグして他のパネルから離します。その際、青いドロップゾーンが表示されていないことを確認してから離してください。
<タイムラインの配置を変更>
モニタ画面のスペースを有効に活用したいという人も多いでしょう
Flash CS3では、タイムラインを柔軟に配置できるようになりました。図5のようにタイムラインをドキュメントから切り離してパネルにし、ステージ領域を拡げることができます。
特にアニメーターにとっては役立つ機能でしょう
図5: タイムラインにアクセスしやすい状態にしつつ、ワークスペースでのステージ領域を拡げることが可能です。以下のステップで、タイムラインをドキュメントから切り離し、他のパネルとドッキングさせることができます。
タイムラインの右上の角にあるフレーム表示ポップアップメニューから「配置/ドキュメントからドッキング解除」を選びます(図6)
図6: フレーム表示ポップアップメニューを使ってタイムラインをドキュメントから切り離します。タブをクリックしてドラッグしながら、ステージの右側にあるパネルとドッキングさせます。青いドロップゾーンが表示されたらマウスボタンを離してください。タイムラインをもとに位置に戻す場合は、フレーム表示ポップアップメニューから「配置/ドキュメントの上」を選びます。ステージ領域をさらに拡げたい場合は、ドックの右上にある二重矢印をクリックします。ドキュメントからタイムラインを切り離し、ドックをアイコン表示させることで、図5と同じようなワークスペースが確保できます。ステージをほぼ画面いっぱいに拡げつつも、各種ツールやパネルにアクセスできる状態です。
タイムラインを初期状態の位置に配置しておきたい場合でも、ドックをアイコン表示させるだけである程度のスペースの確保にはなるでしょう
<パネルのスタック>
また、Flashの新しい機能として、ドッキングを解除してフローティングさせているパネル同士をスタック(積み重ねる)することができるようになりました。以下のステップで、パネルをスタックします。パネルをステージ上にドラッグして、青いドロップゾーンが表示されていない状態でマウスボタンを離します。2つ目のパネルをドラッグして、1つ目のパネルの下に移動させます。
1つ目のパネルの下に青いドロップゾーンが表示されていることを確認してください(図7)
図7: 1つ目のパネルの下に青いドロップゾーンが表示されている状態でマウスボタンを離してください。青いドロップゾーンが表示されている状態でマウスボタンを離せば、この2つのパネルはスタックされました。1つのまとまったパネルとして、一緒に移動させることができます。
<パネルのアイコンとボタン>
閉じたパネルは、Flash 8の場合と同様に、ウィンドウメニューから開くことができます。図8: パネルのタブ内にある「X」ボタンでパネルを閉じることができます。Flash 8では、パネル名の先頭に矢印があり、これをクリックしてパネルを折り畳んだり展開したりすることができました。Flash CS3では、その代わりにパネルの右上に最小化・最大化ボタンが実装されました。
その横には「X」ボタンがあり、パネルグループ全体を閉じることができます(図9)
図9: パネルの右上にある最小化・最大化ボタンと「X」ボタン
また、パネルのタブをダブルクリックすることでも、パネルを折り畳んだり展開したりすることができます。もしパネルがアイコンモードで表示されている場合は、アイコンをクリックすることで、パネルを折り畳んだり展開することができます。パネルメニューは各パネルの右上にあります。図9でカーソルが指している箇所です。Flash 8では、プロパティインスペクタの右下にある三角マークをクリックして、パネルの高さを変更することができました。Flash CS3では、プロパティタブの先頭にある上下矢印をクリックして、最大化、半分サイズ、最小化の3段階で高さを調整することができます。図10: 上下矢印をクリックしてプロパティインスペクタの高さを調節できます。
<パネルの外観を変更>
疲れてきましたか
でも、まだまだありますよ
新しいワークスペースの最も大きな特徴の1つは、ドック内のパネルを「アイコンおよびテキスト」「アイコンのみ」の表示にすることができる点です。
編集バーにあるワークスペースメニューをクリックします(図11)
S「アイコンおよびテキスト(デフォルト)」を選びます。右側のパネルがアイコンとテキストだけの表示に切り替わります。図11: 編集バーにあるワークスペースメニューから「アイコンおよびテキスト(デフォルト)」を選びます。
ドック内のパネルアイコンをクリックすると、該当パネルが表示されます(図12)
図12: パネルを表示するにはアイコンをクリックします。編集バーにあるワークスペースメニューから「アイコンのみ(デフォルト)」を選びます。今度はアイコンだけが表示されるようになりました。同じようにアイコンをクリックすれば、該当パネルが表示されます。ドックの表示サイズを変更する方法は他にも2通りあります。
1つは、ドックの上部にある二重矢印をクリックする方法です(図13)
クリックするごとに表示が切り替わります。図13: ドックの上部にある二重矢印をクリックします。
もう1つは、ドックの左上にあるグリッパーをクリックしながらドラッグしてサイズを変更する方法です(図14)
「アイコンおよびテキスト」あるいは「アイコンのみ」表示の場合、グリッパーを使ってサイズを変更すれば、ドックの幅に応じて表示方法が切り替わります。図14: グリッパーを使ってドックの幅を変更でき、その幅に応じて「アイコンおよびテキスト」あるいは「アイコンのみ」と表示が切り替わります。
Flashではいつも課題となっている作業領域ですが、このドックの機能を使えば、スペースを有効に活用できるようになるでしょう
この機能でワークフローが大幅に改善されるかもしれませんね
もしかしたら、モニタを2台使っている人は1台ですむかも
いや、やっぱり2台必要かも
<ワークスペースの保存と変更>
れまでと同様にお気に入りのワークスペース状態を保存できますし、保存したワークスペース状態同士で瞬時に切り替えることもできます。
Flash CS3では、編集バーにあるワークスペースメニューから、ワークスペース状態の保存・変更ができるうようになっています(図15)
図15: 編集バーにあるワークスペースメニューから、ワークスペース状態の保存・変更ができます。一度ワークスペースの状態を保存したら、その保存名はワークスペースメニュー項目の上部に表示されます。ワークスペースメニューでは、新しくワークスペース状態を保存できるほか、削除や名前変更などの管理を行ったり、デフォルト状態へ戻したり、最大化モードに変更したりすることができます。Macintosh版で最大化モードに変更すると、ドキュメントのタイトルが非表示になり、ドックやツールパネルの下部スペースがグレーで埋められます。
狭いワークスペースで作業をしている人たちにとって、非常にうれしい機能でしょう
オプションで、ドッキングパネルかフローティングパネルかを選ぶことができます。また、Windows版と同様にパネルをドッキングさせたり、ドッキング解除をしたりすることができます。
最大化モードに変更すると、ドキュメントのタイトルが非表示になり、ドックやツールパネルの下部スペースがグレーで埋められます(図16と図17)
図16: フローティングパネルではなく、ドッキングパネルで作業ができます。
図17: 最大化モードにしたところ
ここで紹介しているユーザーインターフェイスの特徴は、Creative Suite 3の他の製品でも採用されています。
ワークスペースの新機能
前の項目では、ドックなど、新しいワークスペースのインターフェイスの特徴を解説しました。実は、ダイアログボックスでも新機能の追加や変更が施されています。この項目では、描画、他の製品との連携、ビデオ、新コンポーネント、ActionScriptに関する新機能を解説します。ライブラリに読み込まれたビットマップ画像をダブルクリックすると、ビットマップシンボルライブラリアイテムダイアログボックスが開き、そのビットマップ画像の情報を見ることができます。このダイアログボックスが新しくなりました。図18のように、ビットマップ画像のプレビュー領域がかなり大きくなりました。リンケージ見出しの下の部分にも変更点があります。「基本クラス」という項目が追加され、シンボルに基本クラスを設定することができます。0の項目で詳しく解説します。
<境界ボックスのカラーのコントロール>
Flash CS3では、選択時に表示される境界ボックスのカラーをエレメントのタイプごとに設定できます。
描画オブジェクト、描画プリミティブ、グループ、シンボル、その他のエレメントに分けて異なるカラーを設定することができるのです(図19)
些細なことですが、非常に役立つ改善点です。
図19: エレメントのタイプごとに境界ボックスのカラーを色分けしたところ
jsというファイルが書き出されるようになりました。通常、Internet ExplorerではSWFファイルなどの埋め込みコンテンツを表示する際にメッセージが表示され、コンテンツを動作させるにはユーザーがそのコンテンツをクリックしなければなりません。jsをサーバにアップロードしておけば、Internet Explorerにおいても、ユーザーのクリック操作なしに自動でコンテンツを動作させることができます。jsを利用した、Internet Explorerのアクティブ(埋め込み)コンテンツ検出への対応についての詳細は、「ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備」を参考にしてください。
<ステージ上で9スライスのプレビュー>
Flash CS3では、ステージ上で9スライスのプレビューができるようになりました。9スライスを適用したムービークリップを修正して、結果を見たいと思えばすぐ見ることができるのです。新規シンボルを作成して、ダイアログの「9スライスの拡大/縮小のためのガイドを有効にする」にチェックを入れてください。
そのシンボルをダブルクリックしてシンボル編集モードにすると、9スライスグリッドが表示されるはずです(図20)
図20: シンボル編集モードにすると、9スライスグリッドが表示されます。グラウンドホッグのイラストに9スライスを適用させるのは無意味かもしれませんが、どのような機能なのかをイメージしていただけると思います。
<モーションやフィルタのコピー&ペースト>
コピー&ペーストに関してはかなりの機能強化が施されています。まずはじめに説明するのは、モーションのコピー&ペーストです。あるオブジェクトのモーショントゥイーンを他のオブジェクトにコピー&ペーストで適用することができます。フレーム、トゥイーン、オブジェクトの各種情報をペーストでき、その内容を選択してペーストすることもできます。以下の手順でモーションのコピー&ペーストを行います。新規シンボルあるいはグループを作成して、ステージ上のレイヤー1に配置します。タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。サンプルファイルでは、レイヤー1に単純なモーショントゥイーンを追加しています。新規レイヤー(レイヤー2)を追加します。レイヤー2に新規シンボルあるいはグループを作成します。
ライブラリからもう1つインスタンスを追加してもいいでしょう
タイムラインのレイヤー1のアニメーション部分を選択し、コンテクストメニューから「モーションをコピー」を選びます(図21)
図21: アニメーション部分を選択して、コンテクストメニューから「モーションをコピー」を選びます。Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします。レイヤー2にある、アニメーションをペーストしたいインスタンスのフレームを選択します。フレームが選択された状態で、コンテクストメニューから「モーションをペースト」を選びます。これでレイヤ-1のモーショントゥイーンをレイヤー2のインスタンスに適用することができました。0としてのモーションのコピー」というのがあります。ステージ上に2つのシンボルインスタンスを追加します。
フィルタパネルを開きます(メニューから「ウィンドウ/プロパティ/フィルタ」)
どちらかのインスタンスを選び、フィルタパネルのフィルタの追加メニューからフィルタを追加します。どのようなフィルタでも構いません。フィルタを適用後、そのインスタンスを選択して、フィルタパネルの「フィルタをコピー」メニューから「選択範囲をコピー」を選びます。2つ目のインスタンスを選択して、フィルタパネルの「フィルタをペースト」ボタンをクリックすれば、1つ目のフィルタが適用されます。ノート:複数のフィルタを使用し、そのすべてを他のインスタンスに適用させたい場合は、フィルタパネルの「フィルタをコピー」メニューから「すべてをコピー」を選びます。
次の項目でその内容を解説しましょう
ファイル読み込みや他のアドビ製品との連携に関する改善点
Flash CS3では、他の製品との連携、AIファイルやPSDファイルの読み込みに関しても多くの改善が施されています。Flash CS3では、AIファイルやPSDファイルを直接読み込むことができ、ほとんどのデータタイプをサポートしています。ファイルの読み込みに際して、多くのオプションが用意されており、ファイルごとに読み込みを制御できます。
たとえば、レイヤーを維持したり、新しく追加したり、名前を変更したり
他にも、シンボルインスタンスを追加したり、インスタンス名を追加したりすることが可能です。メニューの「ファイル/読み込み/ステージに読み込み」あるいは「ファイル/読み込み/ライブラリに読み込み」を選んでPSDファイルを読み込む際に、以下のダイアログが表示されます。
図22: PSDファイルを読み込む際に表示されるダイアログ
ダイアログの左側を見ると、ファイル内のレイヤーやレイヤー名が維持されているのがわかります。PSDファイルを読み込んだ後でも、Flashでそのファイルのコンテンツを編集することができます。コンテンツを編集する必要がないというのであれば、レイヤーを結合してビットマップ画像として読み込むこともできます。PSDファイルのレイヤーをFlashのタイムラインのレイヤーやキーフレームとして変換できますし、ムービクリップとして読み込むこともできます。また、レイヤーの位置を元のPhotoshopでの位置と同じままの状態で読み込むことができます。その他にもファイルを読み込んだ後に、コンテンツをステージの中央に配置することもできます。コンテンツをステージに読み込む際に、PSDファイルのキャンバスサイズに合わせてステージをリサイズすることもできます。
この機能に喜ぶ人は多いのではないでしょうか
メニューの「ファイル/読み込み/ステージに読み込み」あるいは「ファイル/読み込み/ライブラリに読み込み」を選んでAIファイルを読み込む際に、以下のダイアログが表示されます。
図23: AIファイルを読み込む際に表示されるダイアログ
PSDファイルの場合と同様に、AIファイルのレイヤーをFlashのタイムラインのレイヤーやキーフレームとして変換できます。さらに、すべてのコンテンツをFlashの1つのレイヤーに納めたり、レイヤーのコンテンツをムービークリップに変換したり、各レイヤーをビットマップ画像として読み込むことも可能です。その方が、ファイル全体を読み込むより素早くできてかつ簡単です。Webサイトのレイアウトのような大きなデザインではなく、キャラクターやボタンなどのアセットをFlashに移したい場合も、ファイルを読み込むよりはコピー&ペーストの方が簡単です。実際にコピー&ペーストでデータを移してみてください。Illustratorファイル上でのパス、ストローク、シェイプ、階調、テキスト、シンボル、マスク、ブレンドモードなどの属性がそのままFlashにも引き継がれます。このようにAIファイルやPSDファイルを読み込む際に表示されるダイアログで細かく制御できるようになったほか、環境設定でも読み込みを制御できます。環境設定を開くと、カテゴリリストに「PSDファイルインポータ」と「AIファイルインポータ」という項目が追加されました。
ここで、AIファイルやPSDファイルを読み込む際の条件を設定できます(図24と図25)
ここで解説した以外にもたくさんの機能があります。詳しくはビデオチュートリアルを見てください。たとえば、Illustratorを使ってシンボルを作成し、その基準点を操作したり、インスタンス名を割り当てたりすることができます。それらの情報を保持したまま、Flashで読み込むことができます。詳細はビデオチュートリアルを見てください。いずれの製品でもシンボルを作成して、シンボルを拡大/縮小しても歪まないように9スライスを使用することができます。たとえば、Illustratorで9スライスを使用してボタンなどのインターフェイスパーツを作成し、Fireworksでそのボタンを取り入れたWebサイトのプロトタイプを作成し、Flashでそのボタンにアニメーションを追加して仕上げるといったことも可能です。新しいダイアログでは、FireworksのPNGファイルのページを任意に選んで読み込むことができます。Flash CS3では、携帯電話などのデバイス向けコンテンツ開発のワークフローが変わりました。Device Central CS3では、モバイル端末のエミュレートができるだけでなく、開発の初期段階からターゲットデバイスを想定して作業することが可能となりました。Flash 8でモバイルデバイス向けコンテンツを作成する際は、主にモバイルデバイステンプレート、デバイス設定ダイアログ、パブリッシュ設定ダイアログで作業や条件設定を行っていました。
そのウィンドウ上で、ターゲットとするデバイスを選び、適切な設定を行い、「作成」ボタンをクリックします(図28)
あとは、Flash側でコンテンツの作成・編集を行います。Flashでのモバイルコンテンツの作成に関するビデオチュートリアルがあります。Adobe Bridgeはファイルやアセットを管理するツールで、ファイルの管理/ブラウジング/プレビューなどの機能が用意されています。他にも、特定の作業を自動化したり、カラー設定を適用したり、さらにはストックフォトを購入することもできます。特にチームで作業を行う環境では、バージョン管理は必須です。Adobe Bridgeのブラウジングシステムでは、クリック操作でブラウジングしたり、特定のファイルの情報を表示することができます。表示するファイルを条件で絞り込んだり、表示スタイルを変更することも可能です。ドキュメントにいくつかのバージョンがあったり、たくさんの写真を扱うときなどにあると便利な機能です。ラベルは、初期状態で「選択」「第2候補」「承認済み」などがあり、任意の名前に変更できます。
図31: 写真に「作業用」ラベルと星4つを付けたところ
特に、大きなプロジェクトや、チームで作業を行うプロジェクトの場合に役立つ機能です。プロジェクトの名前を入力後(ここでは、Groundhogという名前を付けています)、「OK」ボタンをクリックしてプロジェクトを作成します。これで、今作成したプロジェクトにファイルを追加していくことができます。Version Cueプロジェクトに追加したいファイルを選び、コンテキストメニューから「移動/プロジェクト名」を選びます。必要に応じてファイルにコメントを追加し(図32)、「OK」ボタンをクリックしてファイルを移動させます。
プロジェクトに追加されたかどうかを手早く確認する方法は、Adobe Bridgeの左側にあるカラムのフォルダタブをクリックして探します(図33)
図33: プロジェクトファイルを閲覧するには、ファイルを選んで右クリックするか、ファイルの上にあるアイコンで操作します。
新しい描画ツール
Flash 8では、線や塗りの新しい仕様や、新しい描画モデルが導入されました。
<強化されたペンツール>
また、三次から二次への変換がより効率的になり、その結果、正確さが増し、ポイント数が少なくなりました。
ツールパネルのペンツールのサブメニューには、アンカーポイントの追加ツール、アンカーポイントの削除ツール、アンカーポイントの切り替えツールが表示されます(図34)
図34: ペンツールのサブメニュー
各ツールの機能は、その名が示す通りです。アンカーポイントの追加ツールを使えば、パスにアンカーポイントを追加できます。アンカーポイントの削除ツールを使えば、パスのアンカーポイントを削除できます。
アンカーポイントの切り替えツールを使えば、スムーズポイントをコーナーポイントに変換できます(その逆も可能です)
ペンツールに関連したポインタの詳細については、Flash LiveDocs内の ペンツールの操作」を参考にしてください。わざわざドローイングの作業を中断してツールを選びなおさなくても、すぐにセグメントを変形できるのです。これでドローイングの作業もすっきりとするので、作業の効率化が期待できます。Flash CS3では、矩形や楕円を作成する新しい描画ツールが追加されています。矩形プリミティブツールと楕円プリミティブツールです。これらのツールで作成した矩形や楕円は、そのプロパティをプロパティインスペクタで編集できます。
これらのツールを使用するには、ツールパネルにある矩形ツールのサブメニューから選びます(図36)
図36: 矩形プリミティブツールと楕円プリミティブツールは、ツールパネルにある矩形ツールのサブメニューから選びます。矩形プリミティブツールはいろいろと変形させることができます。
たとえば、四隅を角丸にしたり、丸く凹ませたり(図37)
1つのシェイプですが、複数のオブジェクトから構成されているかのように編集できます。
図37: 矩形プリミティブツールで作成した矩形に対して、プロパティインスペクタにある「矩形の角丸の半径」を設定しているところ
みなさんもぜひ試してみてください。矩形プリミティブツールで矩形を作成して、プロパティインスペクタにある「矩形の角丸の半径」の値をスライダーで変更するだけです。4つの角丸を連鎖させて一度に設定することもできますし、個別に設定することもできます。いったん変形させた後に別な作業を行っても、再度シェイプを選択してプロパティインスペクタで修正することが可能です。Tips: 角丸を個別に設定するには、4つの半径入力フィールドの中心にある鍵アイコンをクリックします。楕円プリミティブツールで作成した楕円に対して、プロパティインスペクタ上で「開始角度」「終了角度」「内側の半径」を設定できます。
内側の半径とは、中にある円の半径のことです(ドーナツのようなイメージですね)
開始角度と終了角度は、楕円から扇形状のシェイプを抜き取った状態にするための設定です。これを使えば半円も簡単に作成できます。
図38: 楕円プリミティブツールで作成した楕円に対して、プロパティインスペクタにある「開始角度」と「終了角度」を設定しているところ
Flash CS3では、ビデオのワークフローに関しても数多くの改善が施されています。Flashビデオにキャプションを簡単に付けることができるようになり、またキューポイントの保存とロードの機能が追加され、FLVファイルに追加したキューポイントを保存して別のFLVファイルに適用できるようになりました。さらに、QuickTime書き出しも強化され、アニメーションをより簡単に配信できるようになっており、どんなアニメーションでもMOVファイルに書き出せます。以前のバージョンでは、QuickTimeで書き出せるアニメーションは限られていました。ムービークリップアニメーションやスクリプトベースのアニメーションが含まれているアニメーションは書き出すことができませんでした。この制限は、テレビやDVDで再生するアニメーション用のビデオフォーマットに書き出したい人や、さらにビデオ編集ツールで編集したい人たちにとっては厄介な問題でした。ムービークリップアニメーションやスクリプトベースのアニメーションが含まれていても、QuickTimeで書き出すことが可能です。Flash Video Encoderには新しくキューポイントタブが追加され、FLVファイル内にあるすべてのキューポイントを保存し、さらに別のFLVファイルに適用できるようになりました。キューポイントはタイムコードをベースとしたXMLファイルとして保存されるので、ロードする際も手作業で一つづつ追加する必要はなく、図39の「キューポイントをロード」ボタンをクリックして、あとはエンコードするFLVファイルに適用するだけです。他のFLVファイルのキューポイントロードして適用させることも可能です。0仕様にアップデートされています。0ベースで作成されていました。0コンポーネントに変わりました。0が導入されとはいえ、すぐに移行できる人ばかりではありません。
0で制作する機会もあるでしょう
新規ファイルを作成する際に、ファイルタイプから「Flashファイル(AS2
0)」を選ぶと、コンポーネントパネルにはV2コンポーネントが表示されます。
0コンポーネントが表示されます(図41)
0コンポーネントのリスト
0コンポーネントは、V2コンポーネントに比べてより軽く、スキンを変更しやすくなっています。0コンポーネントには、新しいコンポーネントが追加されてますし、逆に削除されているコンポーネントもあります。
V2コンポーネントのUIフォルダ内にあったコンポーネントで削除されたものがありますが、もしそれらを使用したい場合は、ファイルタイプを「Flashファイル(AS2
0)」として作成してください。0コンポーネントではUILoaderコンポーネントと名前が変更されています。コンポーネントの機能としては同じです。0を使うという点です。
実際に両方の方法で同じサンプルを作成して、その違いを確認してみましょう
0ベースのV2コンポーネントを使う方法です。0ベースの新規FLAファイルを作成します。コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。
0コンポーネントを使って作ってみましょう
0ベースの新規FLAファイルを作成します。コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。0コンポーネントとの違いが分かっていただけたと思います。また、Flashデベロッパーセンターの Flash クイックスタートでも、新しいコンポーネントにつてい解説しています。それにともない、アクションパネルやスクリプトウィンドウ、そしてデバッグツールの機能も強化されました。0のサポートはもちろんこと、効率よくコーディングできるようになっています。
それでは、個々の特徴を見ていきましょう
アクションパネルやスクリプトウィンドウでは、コードの任意の範囲を折り畳んで隠すことができます。この機能を使用するには、まず折り畳みたいコード部分を選択してハイライト表示します。すると、コードと行番号の間にあるスペースに2つの三角マークとラインが表示されます。
この状態で、三角マークをクリックするとコードが折り畳まれ隠れてしまいます(図42)
図42: コードを折り畳んで隠すことができます。再度コードを表示したいときは、三角マークをクリックします。Tips: コードを隠す方法は、上記以外にも、アクションパネルやスクリプトウィンドウの上部にあるボタンを使う方法もあります。この場合、括弧内のコードを折り畳んで隠します。ボタンをクリックしたときにどのコード部分が隠れるかは、カーソルの位置や、コードの折り畳みの状況によって決まります。隠したコードを表示するには、「すべてを展開」ボタンをクリックします。図43: ボタンを使ってコードを隠したり表示したりできます。また、コードの任意の範囲をコメントにするボタンもあります。
コメントにしたいコード部分を選択して、「ブロックコメントを適用」ボタンか「行コメントを適用」ボタンをクリックします(図44)
図44: コードをコメントにすることができます。コメントを解除するには、「コメントを削除」ボタンを使います。
おそらく、スクリプト関連のパネルに施された機能強化の中で一番素敵な機能は、コンパイルエラーパネルのダブルクリックエラー表示機能でしょう
コンパイルエラーパネルでは、以前のバージョンと比べて、エラー内容をより詳しく説明するようになりました。さらに、エラー項目をダブルクリックすると、スクリプトウィンドウ内の該当コード部分が自動でハイライト表示されます。
以下のサンプルコードで試してみましょう
このコードにはあらかじめエラーを入れています。
デバッグを行うと、どこにエラーがあるのかを、コンパイルエラーパネルが教えてくれます(図45)
では、何を使いましょう
エラー項目をダブルクリックすると、該当するコード部分をハイライト表示してくれます(図46)
図46: コンパイルエラーパネルの項目をダブルクリックすると、該当するコードがハイライト表示されます。スクリプトウィンドウからFlashアプリケーションをチェックしたい場合に便利な機能です。ActionScriptファイルと関連づけるには、そのFLAファイルを開いておかなければなりませんが、それでも一々FLAファイルを選んでチェックするよりは効率的です。コーディング/デバッグ環境は、Flash 8に比べて非常に改善されています。以前なら、エラーのあったコードを自分で探さなければなりませんでした。もう1つ重要な特徴があります。それは、ドキュメントクラスです。
<ドキュメントクラスの作成>
Flash CS3では、FLAファイルに対してドキュメントクラスを作成することができます。ドキュメントクラスは、メインのタイムラインと関連づけられたクラス定義です。タイムラインが初期化される際に、ドキュメントクラスが作成されます。
ドキュメントクラスは、プロパティインスペクタで設定することができ、ドキュメントクラス欄にその名前を入力します(図48)
図48: プロパティインスペクタのドキュメントクラス欄にドキュメントクラスの名前を入力します。ドキュメントクラスは以下のように使用します。flaと同じフォルダ内に保存します。asに以下のコードを記述します。flaでは、何も選択せずに、プロパティインスペクタのドキュメントクラス欄にMainMovieと入力します。ノート: ドキュメントクラス欄では、as拡張子を付けないでください。保存して、ムービーのプレビューを行います。
<シンボルの基本クラス>
Flash CS3では、ライブラリ内のシンボルにクラスと基本クラスを指定することができます。この機能により、シンボルのインスタンスをダイナミックに作成することが可能となりました。以下は、その手順です。何かグラフィカルな要素があるムービークリップを作成します。ライブラリ内のムービークリップを選択して、パネルメニューからリンケージを選ぶと(あるいは、右クリックしてコンテキストメニューからリンケージを選びます)、リンケージプロパティダイアログが開きます。図49: クラス欄と基本クラス欄を入力します。
では、このFLAファイルで使用するDraggableClipクラスを作成しなければなりません(今回は、記事のサンプルとして用意してあります)
ノート: 新規シンボルダイアログやシンボルに変換ダイアログにも基本クラス欄があり、指定できます。flaと同じフォルダ内に入れます。flaに戻り、ムービーのプレビューを行います。ムービークリップをドラッグしてステージ上を動かせるはずです。
<強化されたデバッガ>
0のコードを簡単に検証できます。デバッグを実行すると、ワークスペース全体がデバッグ環境に変わり(デバッグワークスペースと呼びます)、デバッグ用のFlash PlayerでSWFファイルが表示されます。
アクションパネルやスクリプトウィンドウ、変数パネル、デバッグコンソールパネル、出力パネルです(図50)
各パネルの機能や使い方は、これまでと同じですが、以前よりフレキシブルなデバッグ環境となっています。
図50: 新しいデバッグ環境
デバッグワークスペースでデバッグ作業を楽しんでください。Flash CS3でデバッグを行うには、FLAファイルやASファイルを開いて、メニューから「デバッグ/ムービーのデバッグ」を選ぶだけです。
ASファイルで、ムービーのデバッグを実行するには、あらかじめFLAファイルと関連づけておく必要があります(図47)
ノート: ASファイルのターゲットメニューからFLAファイルを選ぶには、該当するファルを開いておく必要があります。デバッグを終了するには、メニューから「デバッグ/デバッグセッションを終了」を選びます。0ベースのSWFファイルをもデバッグすることが可能です。
0としてのモーションのコピー>
デベロッパーの方なら、タイムラインアニメーションをコードアニメーションに変換する仕事を依頼されたこともあるでしょう
複雑なアニメーションを複雑なコードで再現するとなると、非常に難しく手間のかかる作業です。でも、そんな苦労をしなくても済むようになりました。メニューオプションを選ぶだけで、コードができあがるのです。0コードに書き換えた状態でコピーして、別なシンボルに適用することができます。コードは、タイムラインコードやクラスファイル用として適用することが可能です。0としてコピーして、別なシンボルに適用させる手順です。新規シンボルあるいはグループを作成して、ステージ上のレイヤー1に配置します。タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。新規レイヤー(レイヤー2)を追加します。レイヤー2に新規シンボルあるいはグループを作成します。
ライブラリからもう1つインスタンスを追加してもいいでしょう
0としてのモーションのコピー」を選びます。Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします。
ActionScriptコードを適用するインスタンのインスタンス名にするといいでしょう
レイヤー2に追加したインスタンスを選択して、プロパティインスペクタに先ほどのインスタンス名を入力します。新規レイヤー(レイヤー3)を追加します。
ムービーのプレビューを行う前に、レイヤー2がレイヤー1と同じフレーム数だけあるかを確認します(アニメーション中に、シンボルが消えてしまわないようにします)
タイムラインでフレームを追加するには、フレームを選んで、F5を押します。ムービーのプレビューを行います。レイヤー1とレイヤー2が同じアニメーションとなれば成功です。1つはタイムラインのアニメーション、もう1つはコードのアニメーションです。0は、堅実で健老なプログラミング言語です。
0も馴染みやすいでしょう
0は、以前のバージョンより分かりやすくなっていますし、コードの再利用もできます。
膨大なデータを扱う複雑なアプリケーションを制作することもできるでしょう
0を使用することは可能です。
0を使い始めてまず気づくのが、シンタックスの違いでしょう
新しいクラスがたくさん追加されていますし、 Tweenクラスなどの既存のクラスもアップデートされています。また、コードでインスタンスを作成する際に、新しいシンボルタイプを使うこともできます。たとえば、スプライトというタイムラインのないムービークリップを作成できます。0をサポートしています。変更点がかなり多く、この記事ではカバーしきれません。本が1冊かけるくらいのボリュームです。この記事では、基本的なところを紹介します。
0の違いを見てみましょう
ステージ上にボタンがあり、そのインスタンス名はmyBtnです。0の場合、たとえば、メインのタイムラインに以下のようなコードを書きます。0では、少し違います。以下の手順でインタラクティブボタンを作成します。簡単なボタンを作成します。インスタンスを選択して、インスタス名をmyBtnとします。新規レイヤーを作成して、レイヤー名をアクションとします。アクションパネルを開いて、アクションレイヤーの1フレーム目を選び、以下のActionScriptコードを記述します。ムービーのプレビューを行います。おまけとして、ゼロからコードで作るボタンのActionScriptコードを以下に紹介しておきます。0ベースの新規ファイルを作成して、以下のコードをタイムラインの1フレーム目に記述します。ActionScriptに関しては、シンタックスから、パフォーマンス、クラスまでと様々な点で機能強化や改善が施されています。たくさんありすぎて、ここではその触りしか紹介できていません。0のプログラミング」 項目を参照してください。
<さらに学習したい方へ>
0についてもっと詳しく知りたい人は、以下をおすすめします。0」をテーマとした記事を予定しています。
著者について
Jen deHaan氏: カナダ北部の奥深い森で狼に育てられたという数奇な生い立ちを持つ。
成人してからは、Flashのデザイナー/開発者として活躍
Flashの5つのバージョンにわたり解説書を執筆
その後、一旦はFlashに関わる業務から離れる。
タイムライン上のモーション*業務に専念
趣味は雨の中を長時間歩きながら、伝記や生活史の中でFlashという言葉を何回使えるかを考えること
一時期、カナダのドーナツチェーン店「Tim Horton」のコーヒーにどっぷりはまっていて、米国カリフォルニア州に長年住んでから、ようやくコーヒー中毒から抜けられたと語っている。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
この記事に書かれた操作を行うには、以下のソフトウェアが必要です。
この記事のために必要な予備知識
Flashを初めて使用する方へ-パート1:バナーの作成
閲覧者への考慮点
バナーを作成する場合、特定のサイトや広告会社にバナーを納品するには、一定のガイドラインに従う必要があることが一般的です。この記事では、企業(広告会社には様々なタイプがあります。広告会社からはガイドラインが提供されるか、またはこのDoubleClick*が配布するようなキットが提供されます)に広告用のバナーを納品することを目的とはしていないため、広告に関して定められた次のガイドラインについて考慮する必要はそれほどありません。このセクションでは、実際のプロジェクトまたは広く配布されるプロジェクトで、バナーを作成する際に考慮する点について簡単に説明します。一般に、広告会社に納品するバナーを作成する場合は、指定のファイルサイズ、寸法、使用するFlash Playerのバージョン、フレームレートに関するガイドラインに確実に従う必要があります。ときには、使用できるメディアの種類、FLAファイルで使用するボタンコードなど、その他のルールを考慮する必要もあります。バナーを作成し、寸法を変更しました。ファイルサイズも、このサイズのFlash広告として適しています。これから行うレッスンでは、ファイルサイズを小さくする方法を学習します。標準的な広告寸法(およびその他多数の役立つガイドライン)については、IABの標準とガイドラインのページ*を参照してください。ただし、最初に、広告の納品先である広告会社、クライアント、またはWebサイトの広告ガイドラインを必ず確認します。ガイドラインには、ファイルサイズ、寸法、サウンドとビデオの使用方法、およびボタンに関する基準が定められていることがあります。この記事の場合、それよりも重要なのは、Flashコンテンツの作成方法、Flashからの書き出しの方法、Webサイトへの追加方法について理解することです。バナーのガイドラインから学ぶべき事は、閲覧者を考慮する必要があるという点です。これはどのようなWebサイトの作成にも言えることですが、Flashサイトを作成するときには、コンテンツの閲覧者について考慮することが必要です。
それとも、同業のFlash開発者やニューメディア企業が主な閲覧者でしょうか
例えば、様々な層の人たち(ほとんどが、多様な機能を備えたコンピュータの使用者)がサイトを訪問することを想定している場合は、前のバージョンのFlash Player(バージョン8など)を使用する必要があります。他のWeb専門家が訪問することを想定している場合は、新しいバージョンのFlash Player(検知システム付き)が適しています。注意: バナーの納品先がホスティングを行う企業である場合、FLAファイルへのボタンコードの追加方法について特別な条件が課せられることがよくあります。URLではなく、特定の変数(clickTAGなど)を追加するように求められることも多いものです。FLAファイルに追加する正しいボタンコードについては、広告会社、クライアント、またはWebサイトのガイドラインを参照してください。SWFファイルで使用できる1秒あたりのフレーム数(fps)を制限している企業もあります。バナーを設計するときには、fpsレートをできるだけ低く抑えるようにします。
パブリッシュ設定の確認
バナーは前のバージョンのFlash Playerに保存する必要がある場合がほとんどです。ただし、このチュートリアルのパート3では、パブリッシュ設定ダイアログボックスについて説明し、対象となるプロバイダまたは閲覧者の要件に応じて設定を変更できるように、設定の変更方法を学んでおきます。このチュートリアルの前の部分では、ドキュメント設定ダイアログボックスで設定を変更しました。SWFファイルの寸法とfpsレートの設定も行いました。この最後のセクションでは、対象にするFlash Playerの設定を確実に正しく行い、必要なファイルを書き出します。Flash作成者の多くは、出力したり対象にしたりするべきものを理解しているので、FLAファイルの作成時にこれらの設定を行います。
このシリーズのパート2を完了したときに保存したbanner2
flaファイルを開きます。
ファイル/名前を付けて保存を選択して、ファイル名をbanner3
ファイル/パブリッシュ設定を選択します。パブリッシュ設定ダイアログボックスが開きます。このダイアログボックスでは、ファイルのパブリッシュに合わせて様々な設定を変更できます。swf)」チェックボックスが選択されていることを確認します。「HTML」チェックボックスをオフにします。このレッスンでは、HTMLページを出力する必要はありません。そのためには、上述のメニューを使用します。
0」を選択します(まだ選択されていない場合)
「オプション」セクションから「ムービーの圧縮」チェックボックスを選択します(このチェックボックスはデフォルトで設定されています)
「Flash」タブで、ほかの選択を行う必要はありません。選択したら、「OK」をクリックしてドキュメントへの変更を確定します。FLAファイルを編集し終えたら、ファイル/パブリッシュを選択します。この操作により、SWFファイルは、FLAファイルを保存したディレクトリにパブリッシュされます。バナーのSWFファイルのパブリッシュ先であるフォルダを選択します。swf)のファイルサイズを確認します。前述したように、このチュートリアルでは、バナーを広告会社に納品することを目的とはしていないので、ファイルサイズについてそれほど考慮する必要はありません。バナーのファイルサイズを縮小する必要がある場合は、再びパブリッシュ設定ダイアログボックスを選択して(ファイル/パブリッシュ設定)、「Flash」タブをクリックします。バックグラウンドで使用するビットマップ画像の画質を下げるには、JPEG画質をより低い数値に変更します。スライダーを60に移動して、「パブリッシュ」をクリックします。SWFファイルを再び確認すると、ファイルサイズはより小さくなっています。SWFファイルのファイルサイズを変更するには、ほかの方法もあります。ファイルを特定の最大ファイルサイズに設計する必要がある場合は、バナーを定期的にパブリッシュして、現在のファイルサイズを確認します。SWFファイルのサイズは、ビットマップ画像、サウンド、ビデオによってすぐに増大します。Dreamweaverをインストールしていない場合、このチュートリアルはここで終了となります。その場合は、このレッスンからパブリッシュ設定ダイアログボックスに戻って、「形式」タブの「HTML」チェックボックスを選択していることを確認します。ドキュメントをパブリッシュするときに、HTMLファイルがSWFファイルと共に書き出されます。このファイルを開き、必要なHTMLコードをコピーしてWebサイトに貼り付けることができます。このファイルには、既存のWebサイトには不要な余分なタグ(<head>タグや<body>タグなど)が含まれていることに注意してください。SWFファイルをWebページに埋め込むためのコードとスクリプトが必要です。JSファイルは、SWFファイルおよびHTMLファイルと共に書き出されます。次に続くレッスンでは、バナーをWebページに配置して編集します。ユーザによっては、バナー用のWebページをすでに作成している方もいらっしゃるでしょうが、 このチュートリアルでは、このサイズのバナーを配置するのに適したWebページが用意されています。zipファイルをダウンロードしてください。フォルダ内には編集する必要のあるドキュメントが含まれています。htmlというページを開きます。
このファイルのコピーを、前のレッスンでパブリッシュしたSWFファイル(banner3
swf)と同じフォルダの中に保存します。jpgのコピーを、前のレッスンでパブリッシュしたSWFファイルと同じフォルダの中に保存します。
このドキュメントにより、スタイル(テキストの色やマージンなど)がgnome
htmlファイルに追加されます。スプリットビュー(表示/コードとデザイン)が表示されていることを確認します。スプリットビューでは、作業中のコードを表示して編集することができ、デザインビューではSWFファイルを簡単に選択することもできます。テキスト入力カーソルを、HTMLドキュメント内のそのままの位置に置いておきます。ファイルの選択ダイアログボックスが開き、作成したバナーのSWFファイルを選択できます。オブジェクトタグのアクセシビリティ属性ダイアログボックスで、「タイトル」テキストボックスにタイトルを入力します。「こびと労働組合Webサイト用バナー」と入力することも、またはバナーの内容を説明する別の適切なタイトルを入力することもできます。
htmlドキュメントを見て、ドキュメントに追加されたコードを参照してください)
注意: 挿入するFlashコンテンツにアクセスキーを任意で入力することもできます。「アクセスキー」テキストボックスにキーボード上のキーを1文字入力します。SWFファイルにタブ順序を追加することもできます。
ページ上に多数のリンクまたはフォームオブジェクトがある場合は、SWFファイルにこれらのオブジェクトのタブ順序を挿入することができます(ユーザがTabキーを続けて押してページ要素を順次表示する場合)
(オプション)SWFファイルを選択して、プロパティインスペクタの「再生」をクリックし、バナーのアニメーションを表示します。SWFファイルの表示を終えたら、「停止」をクリックします。ファイル/保存を選択し、ドキュメントへの変更を保存します。今度は依存ファイルのコピーダイアログボックスを表示します。「OK」をクリックして、SWFファイルとHTMLファイルが格納されているフォルダにこのファイルをコピーします。
書き出し後の読み込み編集について
ここまでの操作をしていて、Flashバナーに変更を加える点が出てくることがあります。例えば、フレームレートの変更またはテキストの追加を行うとします。プロパティインスペクタにより、SWFファイルのコントロールが表示されます。
プロパティインスペクタの「編集」ボタンをクリックします(図2を参照)
SWFファイルを選択して、プロパティインスペクタの「編集」ボタンをクリックします。関連するFLAドキュメントがFlashオーサリング環境で開くか、または関連するFLAドキュメントを見つけてFlashで開くためのウィンドウが開きます。終了するには、「完了」をクリックします。DreamweaverでSWFファイルの変更を表示するには、ブラウザでサイトを表示するか(ファイル/ブラウザでプレビュー/(ブラウザ))、またはデザインビューでSWFファイルを選択して、プロパティインスペクタで「再生」をクリックします。まれに、プラグインをインストールしていない閲覧者もいます。Flash Playerがインストールされていない閲覧者に対しては、複数の対策を採ることができます。主にFlashの機能を使用しているサイトの場合は、Flash Playerのダウンロードが可能なAdobeサイトにリンクされたカスタムページに、ユーザを送ることができます。この動作でプラグインが確認されると、必要最小限のプラグインを持っているかどうかに応じて、ビジターをそれぞれ別のURLに誘導することが可能です。「+」ボタンをクリックして、ビヘイビアポップアップメニューで「プラグインのチェック」を選択します。プラグインポップアップメニューから「Flash」を選択します。「見つかった場合の移動先 URL :」テキストボックスを空白のままにしておきます。このテキストボックスにより、指定されたプラグインに応じてビジターが送られるページが制御されます。テキストボックスを空白のままにすると、Flash Playerがインストールされているユーザは、同じページに留まります。「見つからなかった場合の移動先 URL :」テキストボックスにURLを入力します。Flash Playerプラグインをインストールしていないビジター向けに代替URLを指定する必要があります。
注意:このチュートリアルに付属のサンプルファイルに含まれているソースファイル*と一緒に、noflash
htmlドキュメントが用意されています。htmlドキュメントと同じフォルダに保存するか、またはそのフォルダ内に自身でファイルを作成します。「検出できなかった場合、常に最初の URL に移動」チェックボックスを選択します。このオプションを選択すると、事実上このオプションは、「ブラウザが明示的にプラグインは存在しないと示さない限り、ビジターはプラグインをインストールしているものと想定する」という意味になります。プラグインのないビジター向けに代替広告を追加するので、このレッスンではこのオプションを選択することが適切です。図4に、Flash Playerの検知を追加するためにこの時点までに行う必要のある選択を示します。完成したファイルは、finishフォルダ内のソースファイルディレクトリの中にあります。パブリッシュ設定ダイアログボックスを選択して(ファイル/パブリッシュ設定)、「形式」タブで「HTML」を選択していることを確認します。新しいファイルを作成する方法、コンテンツを読み込む方法、Flashで新しいアセットを作成する方法、簡単なアニメーションとActionScriptを追加する方法、および作成したファイルをWebにパブリッシュする方法について学習しました。Dreamweaverを使用して、SWFファイルを既存のWebページ(以前に作成した簡単なページと同じようなページ)に挿入する方法についても学習しました。この初歩的なステップでは、Flashについて学習し、WebページにSWFファイルを追加する方法を習得しました。このステップはFlashの使用方法を学習する上で重要なステップとなります。基礎をしっかりと学び、Flashでコンテンツを作成する際の基本的な内容とワークフローを理解することができました。このチュートリアルでの学習により、Flashを使用してこれからますます双方向的で楽しく、機能的かつ便利なコンテンツを作成する方法を身に付けられることを願っています。
次のステップ
最後のレッスンでは、Flashの検知スクリプトを追加しました。Dreamweaverのプラグイン動作はスムーズに機能しますが、動作を少しカスタマイズする必要が出てくる場合があります。接続速度など、その他のシナリオのテストが必要な場合もあります。その場合は、以下のリソースが参考になります。
Flashのインタラクティブなテストを改善するための4つのステップ*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
スウォッチを使いこなしてサイト全体の色を管理する。これらのアプリケーションと同様に、GoLiveでも簡単に色の管理ができるわけです。スウォッチパレットはデフォルトで表示されていますが、もし表示されていない場合やパレットを閉じてしまった時は、ウインドウメニューから開きます。他のAdobe製品と同じように利用できる。他のスウォッチセットに切り替えるには、パレットの右上にあるメニューから他のスウォッチのセット名を選択します。図のVisiBoneスウォッチは私たち執筆陣の愛用しているスウォッチのひとつです。新しいスウォッチを作るには、カラーパレットで新しい色を作成して、スウォッチパレットの下にある「新規スウォッチを作成」アイコンをクリックします。
スウォッチをリスト表示にすると、スウォッチの色と説明を同時に表示することができるため、他のAdobe製品ではリスト表示を愛用している人も多いでしょう
例えばリスト表示にするには、スウォッチパレットのオプションメニューで、「サムネール(小)」や「リスト(小)」を選択して切り換えます。カラーパレットも他のAdobe製品と同様に使うことができます。他のカラーピッカーに切り替えるには、カラーパレットの上にあるアイコンをクリックするか、パレットの右上のオプションメニューから選択します。いくつものパレットやツールバーにカラーフィールドがあります。カラーフィールドを選択してからカラーパレットで色を作成すると、即座にその色が反映されます。カラーパレットで、スウォッチや新しい色を作成する。GoLive CSには新しいスウォッチパレットがあるだけではありません。Photoshopでグラフィックとスウォッチを作成しておけば、同じスウォッチをGoLiveでも簡単に使うことができるため、ワークフロー全体を通して色の一貫性を保つことができます。aco」という拡張子のファイルができます。すると次にGoLiveを起動した時に新しいスウォッチパレットが使えるようになります。気をつけたいのは、GoLiveが読み込むことができるスウォッチは、RGB、CMYK、グレースケールで作られたものだけだということです。これ以外の形式(例えばLABやHSB)で作成された色の値は初期値(例えば#FFFFFF)にリセットされてしまいます。
スウォッチの検索
特定のスウォッチの値や名前の検索もGoLive CSなら簡単です。スウォッチメニューで「検索フィールドを表示」に切り替えると、スウォッチパレットの上部に色の値と色の名前を入れるフィールドが表示されます。目的のカラーを探すには、検索フィールドに値を入力してリターンキーを押します。この便利な機能は、サムネイル表示とリスト表示の両方で使用できます。スポイトツールを使う。カラーパレットのスポイトツールを使うと、モニタ上のどこからでも簡単に色を採取することができます。バックグラウンド(背後)で開かれている他のウインドウやアプリケーション上からも色を採取することができます。カラーパレットでスポイトツールを選択し、カーソルを採取したい色の上に持っていきます。カラーパレットの左上に採取された色がプレビュー表示されたら、その色を適用するためにクリックします。スポイトツールを使って、モニタ上の色を採取する。色を削除する。色を管理したり適用したりする方法がいくつかあることはすでに紹介したとおりですが、オブジェクトに適用された色を削除するのも簡単です。変更したいテキストやカラーフィールドを選択して、カラーパレットの左端にある「色属性を削除」アイコン(赤い斜めの線が入った空の白いボックス)をクリックします。また、テキストを選択している場合は、「文字」メニュー/選択した色を削除を選択すると同様の結果が得られます。カラーショートカットメニューを使う。通常、オブジェクトに色を適用するには、オブジェクトを選択して、スウォッチパレットかカラーパレットで色を選ぶか、あるいは、選択したオブジェクトのカラーフィールドを選択してから、スウォッチパレットやカラーパレットで色を選びます。これでもよいのですが、別の方法もあります。GoLiveのカラーフィールドには右下に小さい黒い三角が付いています。
この黒い三角をクリックすると隠れていたスウォッチピッカーが現れ、そこで素早く色を変更することができます(下図)
また、右クリック(Windows)かコントロールキーを押してクリック(Mac)すると、どのカラーフィールドからでもスウォッチのショートカットメニューを開くことができます。カラーフィールドの黒い三角をクリックすると、スウォッチピッカーが表示される。この手軽で便利な機能をさらに強力にするのが、スウォッチの切り換えです。カラーフィールドの下に隠されていたこのメニューには、VisiBoneスウォッチなどインストールされているすべてのカラースウォッチが表示されています。このリストからスウォッチを選択するだけで、表示される色の組み合わせを切り替えることができます。
カラーフィールドからスウォッチセットを切り替えることも可能
カラーフィールドはGoLiveのさまざまな場所で表示されます。例えばCSSエディタ、ハイライトパレット、インスペクタなどにもあります この方法は、多くの場所で活用できるわけです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
デザインダイアグラムの作成
印刷用に表示
デザインダイアグラムには、ページの階層構造やファイル間のリンクが表示されます。それぞれ異なるデザインで複数のダイアグラムを作成することができます。他の人にデザインを評価してもらうために、デザインダイアグラムを Adobe PDF や SVG 形式に書き出すこともできます。ページの作成を開始する際には、デザインダイアグラムを実際のページに変換し、プロトタイプとして利用できます。ページ構成を変更する場合には、ダイアグラムのファイルをサイトから削除した上で、さらに開発作業を進めることができます。以下に説明する手順では、デザインダイアグラムを作成し、レビュー用に書き出す方法について学習します。さらに、デザインダイアグラムを実際のサイトに変換し、その後の変更に備えてダイアグラム内のファイルを削除する方法についても学習します。デザインダイアグラムを作成し、ページを追加します。サイトウィンドウをアクティブにした状態で、ダイアグラム/新規デザインダイアグラムを選択して新しいデザインダイアグラムを作成します。
ページアイコンを、オブジェクトパレットのダイアグラムセットからデザインビューにドラッグし、「untitled
html」という名前の新しいページを作成します。html」などに新規ページの名前を変更します。子ページを新しく追加します。デザインビュー内でページを選択した状態で、ダイアグラム/新規ページを選択します。新規ページダイアログボックスで、新規作成する子ページのページ数と、ベースとなるファイル名を入力します。例えば、「4」を入力すると新規に 4 ページが作成されます。html」のような要領で名前が指定されます。レビューをしてくれる人のために、デザインダイアグラム内に注釈を追加します。注釈アイコンをオブジェクトパレットのダイアグラムセットからデザインビューにドラッグします。次に、注釈インスペクタでテキストとタイトル線(オプション)を入力します。デザインダイアグラムをレビュー用に書き出します。ファイル/書き出し/デザインダイアグラムを選択します。書き出しオプションダイアログボックスで、ダイアグラムの書き出し形式ドロップダウンメニューから「PDF」を選択して「OK」をクリックします。書き出す Acrobat ファイルに指定する名前を入力し、「保存」をクリックします。を使用できるレビュー担当者に送付し、デザインに関するコメントを追加してもらいます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
迅速なWeb作成のための画像のスライス
印刷用に表示
必要に応じて各スライスを個々に最適化することができます。スライスは、ナビゲーションリンク、ロールオーバー効果のトリガや他の画像を表示するためのプレースホルダとして使用できます。以下の各ステップに従って、画像をスライスし、Web ページで使用する方法について学習してください。Web ページでは、スライス画像を利用して作成したナビゲーションバー、バナー領域、ボタン、メイン画像や情報領域などがよく見られます。
割合に大きく論理的なスライスの作成から始めて、ボタンなど小さなエレメントのスライスも作成しましょう
画像をどのように切り分けるかを決定するにあたって、ガイドを使用すると大変便利です。画像をスライスに切り分けます。スライスツールを選択します。画像を部分的に横断するようにツールをドラッグし、マウスボタンを放してスライスを作成します。この時点で、画像は複数のスライスに分割されています。ユーザが切り離したものがユーザスライスです。ユーザスライス以外の画像部分がいくつかに切り離され自動スライスとなります。ドラッグ操作を続け、さらに画像を切り分けて必要なスライスを作成します。表示/ガイドにスナップ、および表示/スライスにスナップコマンドを使用して、スライスの切り分け作業をやりやすく進めることもできます。スライス選択ツールを使用し、作成したスライスを選択したり、サイズを調整可能です。スライスのサイズを調整するには、目的のスライスをスライス選択ツールでクリックし、表示されるハンドルの 1 つをドラッグします。スライスに名前を指定します。名前を指定するスライスをスライス選択ツールで選択し、オプションバーでスライスオプションボタンをクリックします。スライスオプションダイアログボックスの「名前」テキストボックスで、各スライスにわかりやすい名前を指定します。スライスに指定した名前は、最適化される Web 画像のファイル名にも使用されます。画像のないスライスを作成します。画像のスライスのほかに、画像を含まない "空のスライス" を作成することもできます。空スライスは、HTML やテキストを格納したり、プレースホルダとして利用できます。空のスライスを作成するには、スライスオプションダイアログボックスのスライスの種類メニューから、「画像なし」を選択します。スライスした画像を自分のサイトに追加します。psd の拡張子を付けた名前を指定し、サイトフォルダに保存します。次に、GoLive でサイトを開き、新しい空のページを作成します。Photoshop 画像ファイルをサイトウィンドウから新しいページ上にドラッグします。変数設定ダイアログボックスが表示された場合、「OK」をクリックしてダイアログボックスを閉じます。(このダイアログボックスは、Photoshop ファイルのレイヤーの最上部にテキストレイヤーがあった場合に表示されます。) ページ上にスマート Photoshop オブジェクトg自動的に配置され、スライス画像に対応する Web 用に保存ダイアログボックスが表示されます。各スライスに対して、最適化設定を指定します。スライス選択ツールを使用して各スライスを選択し、Web 用に保存ダイアログボックスでそれぞれの最適化設定を指定します。画像内で、写真を格納しているスライスには JPEG 圧縮方法を、その他のスライスには GIF 圧縮方法を使用できます。「保存」をクリックして Web 用に保存ダイアログボックスを閉じ、スライス画像データを保存する場所を選択します。ページ内に、最適化された Web 画像を保存するためのデータフォルダと特殊な HTML テーブルが作成されます。各 Web 画像と空の画像スライスはそれぞれ別のテーブルセル内に格納されます。空スライスにリンクを追加し、テキストを置換します。ページ内のスライスをクリックして選択します。テキストを選択して空スライスに直接入力したり、スライスの端をクリックしてスライスを選択することができます。テキストスライスインスペクタを使用し、空スライスの背景色やテキスト配置を変更することができます。テキストインスペクタ、またはユーザスライスインスペクタで新規リンクボタンをクリックし、スライスと特定の URL をリンクします。ブラウザで作成したページをプレビューし、ページやその各種エレメントが思ったとおりに機能するかどうかを確認します。空スライスには影響はありません。Web ページをスライス画像から作成すると、ページ全体のデザインを手軽に、迅速に行うことができます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ようこそ、さん
お問い合わせ
ホームユーザ向け写真/ビデオ編集ツール
すべての業種・ソリューション ›すべての製品 ›アドビサポートに問い合わせる。
注文状況の確認
教職員および学生
アドビについて
投資家の皆様へ*
地域・社会への貢献*
お問い合わせ
個人またはホームオフィス
法人のお客さま
教育関係のお客様
おすすめ製品
すべてのソフトウェアを見る ›
購入後について
割引価格でコスト削減
ライセンスをご利用中のお客さま
その他の購入方法
販売店のご紹介
シンプルな花を作る。
印刷用に表示
Adobe® Illustrator®のシンボルやブラシなどのライブラリ機能を使えば、初心者なのかプロフェッショナルなデザイナーなのかに関係なく、描いている作品に本物の迫力を加えることができます。ライブラリには豊富な種類のイラストが用意されており、いつでも好きなときに使うことができます。ここでは、フローラルブラシライブラリの「スミレ」と、オブジェクトを変化させるブレンドツールを使って、ファンタジー色豊かな花を作成する方法を紹介します。新規書類をCMYKモードで開きます。