非対応の端末に向けた下位ステージの作成 - Edge Animateのチュートリアル

このレッスンでは Edge Animateで制作した コンテンツの表示に対応していない 古いブラウザで 閲覧された際に 本来のアニメーションの代わりとなる 画面を表示させる 下位ステージの機能について 解説していきます。 まずは、ダウンロードしてきた ファイルの中にある 「new_project.an」を ダブルクリックして Edge Animateで 開いておいてください。 そして、この画面が そのファイルを開いた状態となります。 このファイルを使いながら 解説を進めていきます。 例えば 今開いているこのファイル このファイルには、魚などが動き回る アニメーションなどが実装されていますが Edge Animateで制作する アニメーションなどのコンテンツは HTML5やCSS3などによって 生成されているため それらに対応していない 古いブラウザで閲覧された際には 正常にアニメーションを 表示させることができません。 今回解説する下位ステージの 機能を使うと この様な 古いブラウザで表示された場合に 本来のコンテンツとは異なる 画面を表示させて ユーザーに最新のブラウザの利用を 促したりすることが可能です。 それでは 実際に下位ステージを設定してみましょう。 下位ステージの設定をするには ステージのプロパティの中にある 「下位ステージ」 と呼ばれるところで行います。 一度こちらの「編集」ボタンを クリックしてみましょう。 すると この様に 真っ白な ステージが表示されました。 このステージは 下位レベルのステージで 古いブラウザで閲覧された時にしか 表示されないステージです。 こちらのステージに設置できる要素 それらはかなり限られていて 例えば、こちらの「テキストツール」 テキスト要素ですね。 テキスト要素を設置するか 若しくは、こちらの「イメージ」 画像素材のみしか設置することができません。 それでは、一度こちらにテキスト要素を 置いてみましょうか。 「ツール」パネルから 「テキストツール」を選んで このステージ上にドラッグします。 そして こちらのテキストには 「新しいブラウザを利用してください」 といった様な旨の 案内文を入れてあげると良いでしょう。 ここでは例えば 「このコンテンツを」 「閲覧する為には」 「最新のブラウザを利用してください」…