このチュートリアルでは、Photoshop でデザインされたファイルを使用したインタラクティブなポートフォリオを作成します。始める前に、Flash Catalyst をインストールし、チュートリアル用素材をダウンロードしておいてください。

ダウンロード

Adobe Flash Catalyst Betaリリースビルド

チュートリアル素材（21.1MB、ZIP形式）

チュートリアル使用上の注意
このチュートリアルは開発中のビルドを元に作成されているため、機能の仕様やユーザーインターフェイスが開発中に変更される場合があります。そのため、以前のビルドで作成したファイルを新しいビルドでは開けない場合があります。また、開発中の製品にはバグが含まれている場合があるため、業務に支障のないコンピューターで使用してください。

既知のバグ
Betaリリースでは、UI 上に翻訳されていないメニューや文字切れているメニューがあります。

Photoshopファイルからプロジェクトを作成

デザインカンプをPhotoshop で確認する

1. ダウンロードしたPSD 素材をPhotoshop で開き、レイヤーとフォルダーの構成を確認してください。
2. 様々な要素ごとに名前がつけられてフォルダー内にまとめられています。これにより、Flash Catalyst に取り込んだときの作業を容易にします。

デザインカンプをFlash Catalyst に読み込む

1. Flash Catalyst を起動します。スタートアップ画面が表示されます。
2. 「Create New Projects from Design File」カテゴリーから、「Adobe Photoshop ファイル (PSD) から」を選択します。
3. 「開く」ダイアログで、「SimpleImagePortfolio.psd」ファイルを選択して開きます。
4. Photoshop 読み込みオプションダイアログでは、デフォルト設定のまま「OK」をクリックします。

5. アートボード上に読み込まれたコンテンツが表示されます。レイヤーパネルでレイヤーやフォルダーの構造や表示/ 非表示設定が元のPhotoshop ファイルを同じであることを確認してください。

※＜レイヤー＞
Flash Catalyst では、フォルダーのことを「レイヤー」と呼び、レイヤーに含まれる個々のシェイプやビットマップを「オブジェクト」と呼びます。これはIllustrator と似ていますが、Photoshop とは異なります

コンポーネントの作成

コンポーネントとは、ボタン、スクロールバー、リスト、コンボボックスなどのような、ユーザーがアプリケーションを操作するためのコントローラーです。Flash Catalyst では予め動作が設定されたコンポーネントを使用できるため、アートワークを簡単に特定のコンポーネントに変換することができます。

アートワークをボタンに変換する

まず、左側のサムネールをボタンコンポーネントに変換してロールオーバーとクリックの動作を設定します。

1. 選択ツールで左側のサムネールの一番上の画像（紫の花）をクリックして選択します。
2. HUD パネル（黒いフローティングパネル）で、「アートワークをコンポジションに変換」プルダウンメニューから「ボタン」を選択します。これはコンテキストメニューや「変更」メニューからも選択できます。

ボタンのステートを設定する

3. 作成したボタンをダブルクリックするか、HUD パネルで「アップ」をクリックして、コンポーネントの編集モードにします。これにより、ボタンの外観を編集できるようになります。

※＜ページ/ ステートパネル＞
ウィンドウの上部に「ページ/ ステートパネル」が表示されています。コンポーネントのステートとは、ユーザーが操作する状態によって様々に変化する状態のことです。ボタンコンポーネントの場合「アップ」「オーバー」「ダウン」「無効」のステートがあり、それぞれnormal、mouseover、mousedown およびdisabled の外観に関連づけられています。

動作全体をカスタマイズすることもできますが、ここでは既に設定されたボタンのステートを変更してマウスを重ねたときに透明なオーバーレイが表示されるようにします。

4. ページ/ ステートパネルで「オーバー」ステートをクリックします。デフォルトではこのサムネール画像はすべてのステートで自動的に共有されているため、この時点では外観は変わりません。
5. ツールパネルで長方形ツールをクリックして選択し、サムネールの上をドラッグして同じ大きさの白い長方形を作成します。
6. ページ/ ステートパネルで「ダウン」ステートを選択します。
7. レイヤーパネルで、作成した長方形の左側のカラムをクリックして目玉アイコンを表示します。これにより、現在のステート（ダウン）に長方形が表示されるようになります。
8. 白い長方形が選択されていることを確認し、プロパティパネルで不透明度を15 に設定します。この変更は「ダウン」ステートにのみ適用され、他のステートには影響しません。

※注意：プロパティパネルで値を入力した後はEnter キーを押して、入力を確定してください。

9. ページ/ ステートパネルで「オーバー」ステートを選択します。
10. 白い長方形が選択されていることを確認し、プロパティパネルで不透明度を30 に設定します。
11. アートボードの上部にあるナビゲーションバーの左端に表示されている矢印かプロジェクト名をクリックするか、Esc キーを押すか、ボタン以外の部分をダブルクリックして、コンポーネントの編集を終了します。

12. これまでのステップを繰り返して、他の二つのサムネールもボタンに変換してステートを設定します（作業時間短縮のために、最初のボタンで作成した長方形をコピーしておき、他のボタンのステートにペーストして使用することもできます）。

ボタンの動作をプレビューする

1. ファイルメニューから「プロジェクトを実行」を選択するか、Ctrl/cmd キーを押しながらEnter キーを入力します。これによりプロジェクトをブラウザ上で実行することができます。マウスをボタンに重ねたりクリックした時の動作を確認してください。

メインアプリケーションのページの作成

ここでは、サムネールをクリックしたときにメインの写真が切り替わり、選択したサムネールの背景に表示される長方形がクリックしたサムネールの背景に移動するような動作を設定します。これには「ページ」を使用します。「ページ」とはウェブアプリケーションのページのようなものですが、Flash Catalyst では、先ほど説明したコンポーネントのステートのように動作します。アイテムは異なるページ間で共有されますが、それらのプロパティはページごとに設定することができるのがウェブページとは異なる点です。

ステート/ ページの作成

1. ページ/ ステートパネルの下部にある「ステートを複製」ボタンをクリックして、全部で３つのページを作成します。これにより、すべてのコンテンツを共有するページが作成されます。
2. 「Page2」ページを選択します。この時点では外観に違いはありません。
3. レイヤーパネルで「Photo Screen」レイヤーを展開し、その中にある「Photos」レイヤーも展開します。
4. 「kyoto_1_fl owers」画像の目玉アイコンをクリックして、紫の花の大きな写真を非表示にします。これにより、桜の木が表示されます。

5. ツールパネルから選択ツールを選択します。
6. アートボードで、最上部にあるサムネールの背景に表示されている淡いグレーの長方形を選択します。
7. Shift キーを押しながら、下矢印キーを押して長方形を２番目のサムネールの後ろに移動します。下記のような外観になります。

8. ページ/ ステートパネルで「Page3」ページを選択します。
9. レイヤーパネルで、「kyoto_1_fl owers」と「kyoto_2_sakura」画像の目玉アイコンを非表示にして、仏像の画像が表示されるようにします。
10. アートボードで、最上部にあるサムネールの背景に表示されている淡いグレーの長方形を選択します。
11. Shift キーを押しながら、下矢印キーを押して長方形を３番目のサムネールの後ろに移動します。
12. ページ/ ステートパネルでそれぞれのページをクリックして、外観が正しいかどうかを確認します。

ページを切り替える動作をサムネールに設定

次に、サムネールをクリックするとページが切り替わるように「カスタムインタラクション」を作成します。

1. 紫の花のサムネールを選択します。
2. HUD パネルで、「カスタムインタラクション」セクションの右側にある「+」ボタンをクリックします。

3. ドロップダウンメニューから「On Click」を選択します。カスタムインタラクションが追加されます。
4. 左側のドロップダウンメニューから「ステートのトランジションを実行」を選択します。
5. 右側のドロップダウンメニューから「Page1」を選択します。
6. 同様に、２番目と３番目のサムネールに、それぞれPage2 とPage3 に移動するインタラクションを設定します。
7. ファイルメニューから「プロジェクトを実行」を選択し、ブラウザ上でサムネールをクリックすると写真が切り替わることを確認します。（まだアニメーションはありません）

トランジション時のアニメーションの作成

ここでは、ページの移動時の滑らかなアニメーションを設定します。Flash Catalyst では、アニメーションはすべてタイムラインパネルで操作します。タイムラインパネルの左側にはステート間のトランジションが表示されており、その右側に選択したトランジションのタイムラインが表示されます。

２つのステート間にアニメーションを設定する場合は、ステートのトランジションを使用します。トランジションとは、２つのステート間で異なるアイテムをどのような動きで変化するかを指定します。例えば、あるステート上には表示されているアイテムが別のステートには表示されていない場合は「フェードアウト」します。あるいは、ステート間で位置が違うときには「移動」します。

1. Page1 を選択し、タイムラインパネルが表示されていない場合は、タイムラインパネルのタブをダブルクリックして開きます（必要に応じてパネルの高さを調整します）。ステート間のトランジションは「ステートのトランジション」セクションに表示されています。
2. リストの最上部の「Page1 > Page2」トランジションをクリックします。トランジションのタイムラインは、ステートに変化がない場合は空です。タイムラインの左側はPage1 ステートに関連し、右側はPage2 ステートに関連します。
3. タイムラインパネルの上部にある再生ボタンをクリックします。トランジションのエフェクトを簡単にプレビューすることができます。
4. 「滑らかなトランジション」ボタンをクリックするか、手動でエフェクトバーの長さを変更してエフェクトの変化にかかる時間（デュレーション）を調整したり、位置を変更してエフェクトが開始する時間を変更したりできます。

ズームスライダーの作成

最後に、右側パネルの下にズームスライダーを作成します。ここでは、実際に画像をズームすることはできませんが、スライダーを設定することはできます。これには、「アートワークをコンポーネントに変換」機能を使用します。スライダーやスクロールバーのようなコンポーネントは、「サム」と呼ばれるスライダーのつまみや、サムを動かすための右/ 左ボタンといった複数の「パーツ」を必要とするためボタンよりやや複雑ですが、Flash Catalyst では、オリジナルのアートワークを使用して簡単にパーツを設定することができます。

1. レイヤーパネルで「Background」レイヤーの左側にある空のカラムをクリックしてロックアイコンを表示します。
2. レイヤーパネルで「Photos Screen」レイヤーを展開し、「Zoom Slider」レイヤーをクリックして含まれるコンテンツをすべて選択します。

3. HUD パネルで、「アートワークをコンポーネントにコンポーネントに変換」ドロップダウンメニューから「水平スクロールバー」を選択します。
4. 作成されたスクロールバーをダブルクリックして、コンポーネントの編集モードにします。
5. レイヤーパネルの上部のセクションで、「Slider Track」オブジェクトを選択します。
6. 変更メニューから、アートワークをパーツに変換＞トラックを選択します。これによりスライダーが動く範囲を設定します。
7. レイヤーパネルで、「Slider Thumb」と「Slider Thumb Over」オブジェクトをShiftキーを押しながらクリックして同時選択します。（先ほど作成したボタンとは異なり、ここでは「アップ」と「オーバー」用の別々のアートワークがあります。）
8. 変更メニューから、アートワークをパーツに変換＞サムを選択します。これにより、スライダー上をスライドするオブジェクトを設定します。
9. アートボード上で、作成したサムをダブルクリックするか、変更メニューから「コンポーネントを編集」を選択してコンポジションの編集モードにします。
10. ページ/ ステートパネルで「オーバー」ステートを選択し、レイヤーパネルで「SliderThumb」オブジェクトの目玉アイコンを非表示にして「Slider Thumb Over」が表示されるようにします。「ダウン」ステートも同様にします。
11. Esc キーを押すか、サムの背景をダブルクリックして、スクロールバーの編集モードに戻ります。
12. 同様に、「Zoom In」と「Zoom In Over」オブジェクトを「右ボタン」パーツに、「ZoomOut」と「Zoom Out Over」オブジェクトを「左ボタン」パーツに設定します。
13. Esc キーを押すか、スクロールバーの背景をダブルクリックして、メインのアートボードに戻ります。
14. ファイルメニューから「プロジェクトを実行」を選択して、スクロールバーの動作を確認します。

これで終了です。プロジェクトを保存するには、ファイルメニューから「保存」を選択してください。

著者について