東京スカイツリーをバックにスライド毎にタイトルロゴが変化！

最後の作例は、ここまで利用してこなかったレイヤーの「ページ背景（上）」を使ったダイナミックなスライドだ。レイヤーの配置が、個々のスライドではなく、全スライドの配置に合わせて相対的に設定されるので使いどころがなかなか難しい。だが、これを利用すれば、全スライドを通したダイナミックな動きを表現することができる。ここでは、レイヤーにスカイツリーの画像を配置しつつ、スライド背景を巧みに組み合わせた、縦に長いサイドロゴが切り替わる表現を組み合わせたスライドを作成する。

図33 スカイツリーをバックにフォトアルバム

作例の構図は、奥のレイヤーに背景の青空の画像を配置する。スライドは固定する。二番目のレイヤーは、背景を抜いたスカイツリーの画像を「中央下」に配置する。三番目のレイヤーには、ロゴの変化する文字列を配置した画像。そして、四番目のレイヤーには、動きを表す矢印画像とロゴを隠すカバーをそれぞれ配置する。レイヤー構造は図の通りになる。

図34 作例3のレイヤー構造

画像は九枚必要になる。まず、第1レイヤーに背景画像001.png、第2レイヤーにスカイツリーの画像002.png。第3レイヤーで使う画像は三枚、003.png～005.png。最後に第4レイヤーが006～009.pngで合計九枚となる。

図35 001.pngは、背景画像。青空のバックの左上にロゴマークを配置する。

図36 002.pngは、スカイツリーの画像だ。不要な部分を切り取り透過処理をする。処理がすんだらPNGフォーマットでファイルを保存

図37 003～005.pngは、背景と組み合わせるロゴ画像になる。それぞれパターンを変えて4枚そろえる。PNGフォーマットでファイルを保存

図38 007～009.pngは、スクロールの動きを見せるための矢印画像。PNGフォーマットでファイルを保存

画像の用意が済んだら早速、LiVEの設定を行う。ポイントは「ページ背景（上）」で「中央下」に画像を配置するところ。これにより下から浮かび上がるようにスカイツリーを表現できる。

図39 スライドの最初の状態。

図40 スクロールすると共に左サイドの黄色のバーと矢印が動いてくる

図41 三枚目のスライドになるとスカイツリーが完全に見えるようになる

図42 四枚目のスライドに完全切りわかるとスカイツリーの一番下が見える。スクロールも終了

設定の確認

スライドの設定を見てみよう。今回は画像の数が多いので設定項目は多くなるが設定場所は、先ほどのサンプルと同じ五カ所。それでは、一つずつ見て行こう。

図43 ページ背景「背景（下）」の設定。配置を「中央上」、背景を固定にチェックを入れる。任意ではあるが「背景色」の設定もしておいたほうがよい。ページ背景「背景（上）」は、配置を「中央下」にする

図44 スライド1の「背景画像（下）」は設定しない。「背景画像（上）」の背景画像を設定。配置は「中央上」にする

図45 スライド2の「背景画像（下）」に画像を設定。配置は「中央上」にする。「背景画像（上）」にも背景画像を設定。配置は「中央上」にする

図46 スライド3の「背景画像（下）」に画像を設定。配置は「中央上」にする。「背景画像（上）」にも背景画像を設定。配置は「中央上」にする

図47 スライド4の「背景画像（下）」に画像を設定。配置は「中央上」にする。「背景画像（上）」にも背景画像を設定。配置は「中央上」にする

これで設定作業は完了だ。ポイントは、ページ背景「背景（上）」の配置を「中央下」にすること。これでダイナミックに動くスカイツリーを表現できる。実際に動くサンプルは、以下のWebサイトで確認できる。

このようにLiVEではダイアログに必要項目を設定していくだけでパララックスを作成することができる。配置の変更や設定もほとんど手間いらずで何度でもやり直すことができるのでパララックスのように微調整が必要なコンテンツ作成には大変便利になっている。こららの特性によってユーザーは、アイデアと画像作りという本来のクリエイターの仕事に専念することができるのだ。