Adobe® Bridge® や Adobe® InDesign® を使って インタラクティブ

ADO B E C AM P U S DAY
Adobe® Bridge® や Adobe® InDesign® を使って
インタラクティブポートフォリオを作ろう!
プリントしたポートフォリオだけでなく、
パソコンでインタラクティブな操作ができたり、
動画を見られるインタラクティブなポートフォリオがあれば
Webで公開したり、CDやDVDなどのメディアに記録して配布できるので
就職活動をさらに効果的にバックアップするツールになるでしょう。
資料ご利用に関する注意事項
本資料はAdobe Campus Day(セミナー)専用です。
そのため、Adobe Campus Dayに参加された方へのみ、印刷物の配布やデータの共有が認められています。
本資料の転載は禁止されています。
資料の著作権はアドビ システムズにございます。
ただし、資料中に使用されているスクリーンショット
(画像)の一部にはアドビ システムズ以外の著作物が含まれております。
*Adobe Campus Dayとはアドビ システムズが学校内で実施するセミナーです。
1
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
インタラクティブポートフォリオとは
ポートフォリオと聞くと、複数の作品をレイアウトしたものをプリンターで出力し、冊子状にまとめたもの、
つまり、紙をメディアとして配布・閲覧するものを指しますが、
インタラクティブポートフォリオは、インターネットやDVDなどをメディアとする、
新しいタイプのポートフォリオです。
インタラクティブとはパソコンでのクリックやドラッグなどの操作で、さまざまに動作するものを指します。
画像が飛び出したり、アニメーションがはじまったり、ページがめくれたり、
紙のポートフォリオとは、まったく違う演出で作品を見せることができるのです。
また、インターネットやDVDですから、
紙のポートフォリオよりも、多くの人に閲覧してもらうことができます。
インタラクティブポートフォリオは、
世界中のほぼすべてのパソコンに搭載されているFlash®のプラグインで動作しますので、
MacでもWindowsでもまったく同じ状態で見ることができます。
インタラクティブポートフォリオはFlashのプラグインで動作する、SWFという形式で作ります。
BridgeもInDesignも、SWFを書き出す機能があります。
2
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
❶ Br i dge で We b ギャラリーを作る
Bridgeの右上の[出力]
をクリックすると、右側に[出力]
タブが出現します。
そこの[Webギャラリー]をクリックします。
誰でも簡単に作ることができる
インタラクティブポートフォリオ
それがWebギャラリー
Flashでインタラクティブに操作できるポー
トフォリオと聞くと、ものすごく難しそうで
すが、Bridgeから書き出せるWebギャラリー
ならば、誰でも簡単にできます。
[Webギャラリー]の設定項目はたくさんありますが、まずは
[ギャラリーのタイトル]だけ入力して、残りはデフォルトでた
めしてみましょう。
FTPサーバーを設定すれば、Bridgeから直接アップロードでき
ますが、あとからFTPソフトなどでアップロードすることも可能
なので、ここでは[保存]をクリックします。
3
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
デフォルトのままですと
[Adobe Web Gallery]
というフォルダーで
書き出されますが、先の設定で好きな名前に変更できます。フォ
ルダーごとWebにアップすればインターネットで公開できます。
フォルダーの中にはHTMLやSWFなど、必要なデータはすべて自
動的に作られています。
Webやメディアによる配布
Webサイトにアップして公開することはも
ちろん、CDやDVDなどに記録して企業に送
付するのも効果的な就職活動になるでしょ
う。
完成したものがこれです。これをもとに、Bridgeの[Webギャラリー]の書き出し設定を自分の好みに
変えて最終形を作ってみましょう。
少し設定を変えるだけでカラフルな[Webギャラリー]にもなります。
4
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
❷ I nD e s ig n でインタラクティブ な ポートフォリオを作る
プリント用のポートフォリオが完成したら、
[ファイル]
メニューの[書き出
し...]を選択し、
[フォーマット]
を[Flash Player(SWF)]
で書き出します。
SWFで書き出すだけ
プリント用のポートフォリオが完成したら、
まずはSWF形式で書き出してみましょう。
何も設定しなくても、電子書籍のようなイン
タラクティブ性のあるものが書き出せます。
5
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
ドラッグでページめくりができる
書き出したものはインタラクティブにペー
ジめくりができるファイルになっています。
自動的にブラウザが立ち上がります。ページの角をドラッグすると、インタラクティブにページめくり
ができます。
SWFとHTMLの2つのファイルで1セットです。これをWebサイトにアップするだけで、全世界に公開
できます。
6
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
見てくれる人へ配慮する
ページめくりができるファイルであるかどう
かは、はじめて見る人にはわかりません。
角をドラッグしてもらえるようマークをつけ
るなどをしておく必要があるでしょう。
たとえば角にページがカールした状態を表現したり、矢印を置いてから書き出せば、初めて見る人
にもわかりやすいものになるでしょう。
7
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
❸ I nD e s ig n でインタラクティブ な ポートフォリオを作る【上 級 編】
さまざまな
インタラクティブをつける
InDesignから書き出すSWFはページめくり
だけでなく、さまざまな効果をつけることが
できます。
インタラクティブなSWFを制作する時は[ワークスペース]
を
[インタラクティブ]にしましょう。
ドキュメント上のオブジェクトを選択した状態で、
[アニメーション]パネルから任意の効果を選択す
るだけでオブジェクトが動くデータになります。ここでは何もない状態から徐々に見えてくる
[フェー
ドイン]
を選びました。
8
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
アニメーションを動かすための
ボタンを作成する
アニメーションを動かすために別のオブ
ジェクトをボタンとして登録します。
ここをクリックした
あと、ボタンにした
いオブジェクトをク
リック
アニメーションをつけたオブジェクトを選択状態で[アニメーション]パネ
ルの右側のアイコンをクリックして、ボタンにしたいオブジェクトをクリッ
クするだけで、アニメ―ションとボタンが関連づけられます。
InDesignには[ウィンドウ]
メニューから呼び出せる
[サンプルボタン]
も用意されています。これを使
うのもいいでしょう。
9
Bridge や InDesign を使ってインタラクティブポートフォリオを作ろう!
ADOBE CAMPUS DAY
紙面ではお見せできませんが、下の赤いボタンを押すと画像が現れ、角をドラッグすると、次のページ
に移動するFlashで動くドキュメントが完成しました。
資料に記載の情報は2012年 9月現在のものです。 内容に関して予告なく変更される場合がございますので予めご了承ください。
アドビ システムズ 株式会社 〒141-0032 東京都品川区大崎1-11-2 ゲートシティ大崎 イーストタワー
www.adobe.com/jp/
Adobe、Adobe ロゴ、Adobe Illustrator、Creative Suite、Adobe Bridge、Photoshop、及びFlashは、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国における商標または登録商標です。
MacおよびMacintoshは、米国および他の国々におけるApple Inc.の商標です。MicrosoftおよびWindowsは米国Microsoft Corporationの米国、日本およびその他の国における登録商標または商標です。
その他すべての商標は、それぞれの権利帰属者の所有物です。
10