Adobe Edge Animmate CCを使用して、動画内のアイテムをタップすると指定したページに遷移するようにしてみる

今回は動画内のアイテムをクリックすると関係するページに遷移する機能を実装してみようと思います。

例えば、動画内の猫がかわいくて、その種類を知りたい、
キャットウォークってどうやって作るんだろう、材料費はいくらなんだろうか、
また、壁に穴を開けなくてもキャットウォークって作れるのだろうかなどを 動画内のアイテムをタップするだけで欲しい情報を提案できる。

そんな潜在的なニーズに対して、情報の提案をすることができます。

まず、前提条件として以下のサービスに加入していて、
Adobe Edge Animate CCが使える状態にあることが必要です。

クリエイティブ制作ツールとクラウドサービス | Adobe Creative Cloud

新規作成

Adobe Edge Animateを起動して、create Newをクリックします

全体の枠を画面の大きさいっぱいにする

Stageをクリック
↓
WとHをそれぞれ100.0%にします

動画をインポート

File
↓
Import
↓
動画を選択

画面描画と同時に動画を再生する

動画名をクリック
↓
Playbackの右の+ボタンをクリック
↓
Play From ...をクリック

動画をセンタリングする

動画名をクリックする
↓
Position and SizeをのW, Hをそれぞれ80.0%にする
↓
LとTをそれぞれ10.0%にする

ブラウザ上で動画を操作できるようにする

VideoのControlsのチェックボックスにチェックを付ける

編集しやすいようにパネルの拡大率を変更する

パネル左下の虫眼鏡マークの入力値を50%にする

キャットウォークをクリックするとECサイトに遷移するようにする

Rounded Rectangle Toolを選択する
↓
アイテムの上に被せる
↓
opacityを50.0%にする
↓
CSS:left,CSS:topをpxから%にする
↓
RecatangleXをリネーム(cat_walk)する
↓
cat_walkを選択して、Convert to Symbolをクリック
↓
{}マークのOpen Actionsを選択
↓
click
↓
Links
↓
Link in Same Window
↓
遷移させたいURLを指定する

これでアイテム上にリンクのレイヤーができました。

ブラウザーでプレビューしたい場合はCommand+returnで見ることができます。

リンクのレイヤーを0秒から28秒の間だけ有効にしたい

動画内のアイテムは常に動いていますので、そのアイテムが表示されている時のみリンクのレイヤーを有効にします。

Timelineを0秒にして、cat_walkを選択します
↓
CSS: displayをOnにします
↓
Timelineを28秒にして、cat_walkを選択します
↓
CSS: displayをOnにします

※この後、リンクレイヤーを無効にしたい場合は適宜Timelineを消したい秒まで進めて、CSS: displayをOffにします。

f:id:keiwt:20141221121943p:plain