前回のビデオでは、ボートにグラデーションを適用しました 今回のビデオでは Photoshopで稲妻の画像を作成し Creative Cloudライブラリ経由でAnimateに読み込んで カラーエフェクトを使って仕上げます では始めましょう Animateから始めます 稲妻を適切なサイズで 作成できるように ムービーのステージサイズを確認します 修正メニューから 「ドキュメント...」
を選択するか、Command(Ctrl) + Jを押します ステージのサイズは、640×480です 稲妻のサイズは、このステージの サイズ以上にする必要があります 「OK」をクリックします ではPhotoshopに切り替えて、新規ファイルを開きましょう ファイル／新規...
を選択します 簡単な手順なので、皆さんも一緒に操作してみてください ドキュメントのサイズを700×500にして 「OK」をクリックします ステージのサイズよりも少し大きくする必要があります 今度は、このアイコンをクリックするか Dキーを押して、初期設定のカラーを 黒と白に設定します ツールパネルまたはGキーで、グラデーションツールを選択すると 黒と白のグラデーションが選択されます ここをクリックして確認しましょう 名前に「黒、白」とあり 黒と白のグラデーションになっています 「OK」をクリックします 次に、ステージ上で左から右にドラッグして グラデーションを適用し フィルターメニューから フィルターメニューから 「描画」 「雲模様2」の順に選択します 今度はイメージメニューで 「色調補正」をポイントし 「階調の反転」を選択するか、Command(Ctrl) + Iを押します さらにイメージメニューで 「色調補正」をポイントし 「レベル補正...」
またはCommand(Ctrl) + Lで レベル補正ダイアログボックスを開きます グレーのスライダーを 右にドラッグします 稲妻と雲のようにするために 右から少し手前に戻します これくらいでよいでしょう 稲妻は毎回見た目が異なるように 皆さんの好みもそれぞれなので 納得のいく稲妻ができるまで 何度も手順を繰り返してください 「OK」をクリックします さらに、Command(Ctrl) + Uを押すか イメージメニューから 「色調補正」 「色相・彩度...」
の順に選択し 「色彩の統一」をオンにして 色相を調整して空に少し青みを加えます これくらいにして、「OK」をクリックします 稲妻の完成です 次は、これをAnimateに取り込みます ファイル／書き出し／Web用に保存（従来）を選択して ファイルに保存し Animateの読み込み機能で ファイルを見つけて開くこともできますが それでは手間がかかります Creative Cloudライブラリを使うと、すばやく簡単におこなえます Photoshopで、ウィンドウメニューからライブラリパネルを開くと Creative Cloudライブラリが表示されます 既に、Animate CC用のフォルダーを作成してありますが 新しいライブラリは、パネルメニューをクリックして 「新規ライブラリを作成」を選択すれば、簡単に作成できます ドキュメントは、とても簡単にライブラリに追加できます 追加したいレイヤーをライブラリにドラッグするだけで CCライブラリに同期されます また移動ツールを使って、ステージから ライブラリにドラッグしてもOKです これでライブラリに、いくつかの稲妻が追加されています 多すぎる場合は、削除するのも簡単です これをクリックし、ゴミ箱アイコンをクリックするだけです あとはAnimateに切り替えて ウィンドウメニューから 「CC Libraries」を選択すれば ご覧のとおり、ライブラリのすべての内容に どのCCアプリからでもアクセスできます 便利ですね 早速、稲妻の画像をクリックして ステージにドラッグすると 読み込みダイアログボックスが表示されます 統合されたビットマップとして読み込むこともできます このレイヤーがシンボルの中に読み込まれるように このチェックボックスをオンにして、「読み込み」をクリックします このように 稲妻がムービークリップシンボルに読み込まれて ステージに表示され 「背景」レイヤーが追加されます このレイヤー名には、PhotoshopでCCライブラリに ドラッグしたレイヤーの名前が設定されるため ここで変更します ダブルクリックして 「Lightning」と入力します このレイヤーを「boat」と「Sky」の間にドラッグします すると、自動的にインデントされ ガイドの中に配置されてしまいました これを修正するために レイヤーを右クリックして「プロパティ」を選択し 「ガイドの対象」から「標準」に変更して 「OK」をクリックします このように、インデントなしの標準レイヤーに変更されました このほか、このレイヤーを「Sky」の下にドラッグしてから 「Sky」を「Lightning」の下にドラッグするという方法でも 標準レイヤーのまま移動できます 次に、稲妻をクリックし このアイコンまたはCommand(Ctrl) + Kで、整列パネルを開き 「ステージを基準」がオンの状態で 水平と垂直の両方向で中央に合わせます ここでライブラリを表示すると このアセットをCCライブラリに読み込んだときに作成された 「背景.psd アセット」というフォルダーが作成され その中にビットマップとして「背景」が収められます そしてこれが新しいシンボル「背景」です これもわかりやすく「Lightning」に変更しましょう ではいよいよ稲妻のエフェクトを作成します まず、この最初のキーフレームをドラッグして 稲妻がフレーム45から2秒あたりの位置から スタートするようにします フレーム1に空白のキーフレームがあり タイムラインをスクラブしていくと、フレーム45のあたりで 稲妻が落ちます 今度は、閃光を追加して 稲妻が落ちたあとに 白い閃光を走らせたいと思います 3フレームほど先の位置で 右クリックして「キーフレームの挿入」を選択します ステージ上でインスタンスをクリックすると、プロパティが切り替わり 「カラー効果」が表示されます 「濃淡」をクリックして濃淡100％の白に変更します このように濃淡を調整すると 色を一定の割合で追加できます ただしカラー効果の多くは、Canvasファイルでは 機能しないため、注意が必要です このため今回は、白とアルファ透明度をうまく活用します この白い背景を この後2フレームにわたって表示し 3つ目のフレームでまたキーフレームを追加します このとき、右クリックの代わりに この新しい、キーフレームの挿入アイコンをクリックしても キーフレームを追加できます このキーフレームをクリックし 今回は、ステージ上のインスタンスではなく 新しいプロパティパネルで「オブジェクト」をクリックして プロパティを表示します この「濃淡」を「なし」に戻すと また稲妻が表示されます このように、稲妻が 白い閃光に変わり また稲妻に戻ります この稲妻をより自然に見せたいのですが 新しい稲妻を作成して読み込むのは、手間なので 今ある稲妻を変形します 今ある稲妻を変形します ステージを右クリックして 「変形」、「横反転」の順に選択すると 稲妻の見た目が変わりました ここでは、タイミングを少し変えるために ここでは、タイミングを少し変えるために すぐ次のフレームにキーフレームを追加し すぐ次のフレームにキーフレームを追加し またオブジェクトパネルで 「着色」を選択して白に変更します これで、稲妻が2フレームにわたり 白い閃光が2フレーム 稲妻が1フレーム、白い閃光が1フレームと続きます ここで右クリックして、空白のキーフレームを挿入します 再生ボタンをクリックして、ここまで確認しましょう 再生ボタンをクリックして、ここまで確認しましょう 稲妻のように見えますね では、少し間を空けて 稲妻をもう1回追加します 閃光が2回走り、少し間を空けて この辺りにキーフレームを追加しますが この辺りにキーフレームを追加しますが 今回は、既にあるキーフレームを使用します 稲妻のフレームから 白い閃光のフレームまで 4つのフレームをすべて選択し Option(Alt)キーを押したまま、フレーム75の辺りまで Option(Alt)キーを押したまま、フレーム75の辺りまで クリック＆ドラッグします また見た目を変えたいので 稲妻のフレームをクリックし ステージを右クリックして「変形」、そして今回は 「縦反転」の順に選択します これで、一見異なる稲妻が3つできました 1つ目、2つ目 3つ目と、それぞれ見た目が異なります 再生しましょう いいですね より一層自然に見せるために、この稲妻を もう1フレーム長くします この稲妻は2フレームで この稲妻は1フレーム そしてこの稲妻は、3フレームにします タイムラインの上部にカーソルを置いて F5キーを押すと、フレームが1つ追加されます これで、稲妻が3フレームにわたって表示され その後、白い閃光が走ります では確認しましょう いいですね 稲妻は、長くとどまったり ほんの一瞬だったりと、毎回異なるので より本物に近い稲妻ができたと思います 最後にもう1つ 稲妻が落ちる前に空を暗くします 「Sky」のタイムラインをクリックし ステージをクリックすると、ビットマップのままなので これをシンボルに変換します ステージで選択した状態のまま、修正メニューから 「シンボルに変換...」
を選択し 名前を「Sky」にして「OK」をクリックすると 名前が使用済みというメッセージが表示されます 後ろにダッシュ（‐）を付けましょう ビットマップの「Sky」とシンボルの「Sky」があるからですね 「OK」をクリックします 空がシンボルになったので、カラー効果を使用できます 稲妻が落ちる1秒手前でクリックして キーフレームを追加します ここでも、新しいキーフレームの挿入アイコンを使うと ワンクリックでキーフレームを挿入できます さらにタイムライン上を進んで この辺りで またキーフレームを追加します 間で右クリックして「クラシックトゥイーンを作成」を選択します 本当は「濃淡」を使って ダークグレーに変え 不透明度を下げたいのですが Canvasファイルではうまくいきません そこで代わりに 「アルファ」を使用して 空の不透明度を下げますが このままでは逆に、空が明るくなってしまいます このままでは逆に、空が明るくなってしまいます そこで、空を非表示にすると 白い背景が見えます この背景の色を暗くしましょう 修正／ドキュメント...
を選択し 「ステージの色」をダークグレーに変更して 「OK」をクリックします また空を表示すると このように、アルファの不透明度が下がるに従って ダークグレーの背景が見えてきます もう少し暗くしましょう いいですね 青空が徐々に暗くなり 雨雲が立ち込めて 稲妻が走ります もう一度稲妻が落ちてから もう一度稲妻が落ちてから この辺りで 太陽が顔を出すようにしましょう Skyレイヤーを選択した状態でキーフレームを追加し タイムラインを進んでまたキーフレームを追加し 間で右クリックして、クラシックトゥイーンを追加します 2つ目のキーフレームをオブジェクトパネルで 「アルファ」から「なし」に変更します このように、青空が 曇りだし 稲妻が2回落ちます では、ムービーを確認しましょう 「ヒューストン、問題発生です」 白い閃光がまったく見えません 原因は、書き出すときに起こる カラー効果とHTML5 Canvasの問題です これに対処するには ライブラリで「lightning」を複製して 「lightning copy」を作成し プロパティパネルでこのシンボルを 「lightning copy」と入れ替えます 再度ここをクリックしてから、シンボルを 「lightning copy」と入れ替え 最後にもう一度、ステージのここをクリックして シンボルを「lightning copy」を入れ替えます Command(Ctrl) + Returnでプレビューします このように 2つのインスタンスを使うことで問題を解決できました 次のビデオでは、サウンドを追加します ぜひご覧ください
